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KKK Macromedia Studio 8 All-in-One Desk Reference For Dummies 


Introduction 


M acromedia has always been known as a leading-edge design company. 
Since it introduced Director more than a decade ago, Macromedia 
has shrewdly developed products (like Fireworks and Dreamweaver) and 
acquired products (such as Flash and FreeHand) geared toward turning 
artists into developers. With its acquisition of Allaire, Macromedia added 

a powerful technology platform to its suite of design-oriented products. 
Macromedia Studio 8 integrates the Macromedia products into a single set 
of Web development tools. The result? We’ve worked in Web development 
since its inception, and we can honestly say that there’s never been a prod- 
uct that is as well designed for Web designers as Macromedia Studio 8. 


About This Book 


Macromedia Studio 8 All-in-One Desk Reference For Dummies (we know, it’s a 
mouthful) is designed to be a hands-on, easy-to-understand guide to the fea- 
tures in all the Macromedia Studio products. The no-nonsense approach is 
designed to help you begin to build Web sites by covering the basics ina 
clear and concise fashion. The way we see it, you’ve got things to do, and 
reading a book, even a clever one, takes up valuable time. The faster we can 
help you do something or answer a question, the better. 


There have been some changes in the latest version of Macromedia Studio 8 
that are worth noting here. In Studio 8, FreeHand and ColdFusion have been 
dropped from the product. However, we still cover them here because if you 
have upgraded from a previous version of Studio, then you still have those 
products on your computer. In addition, you can still download FreeHand 
MX and the developer edition of ColdFusion from the Macromedia Web site. 


How to Use This Book 


You can use this book in a few different ways: 


+ As a reference: If you already have a Web site and use Macromedia Studio, 
this book can be a handy refresher for that thing you couldn’t quite 
remember how to do. Whether it’s exporting graphics to Macromedia 
Flash from FreeHand, or the right syntax for a query in ColdFusion, use 
this book to fill in those gaps that we all have . . . especially as we get older. 
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Three Presumptuous Assumptions 


+ To guide you through building a Web site: Several authors contributed 


to the creation of this book. All of us have a wealth of experience in the 
process of building Web sites. In this book, we’ve tried to impart as much 
of our collective knowledge about the processes and pitfalls of building 
Web sites using these tools as we can. 


To learn about the tools: In this All-in-One Desk Reference, each minibook 
has at most 150 pages to cover a product or topic, which means that we 
get right to the point and make the topics covered easy to understand. 
We believe that this approach makes figuring out these products easier. 


Three Presumptuous Assumptions 


Before you dive into the book, we thought we should give you some advance 
warning of our expectations. We know, you’re the audience, so we shouldn’t 
assume anything! But, just so you know where we're coming from, here are 
our three basic assumptions about you, the reader: 


+ You're in a hurry. Frankly, if you wanted a more in-depth book, you’d 


have picked up a regular For Dummies book on one or all of these prod- 
ucts. Hence the no-nonsense, get it done, and keep on moving approach 
you’re gonna see inside this book. 


You know something about Web development. This isn’t a book in 
which we'll spend a lot of time talking about HTML and how it works. 
So you won’t find a chapter anywhere in this book titled, “What the 
Internet Is and How It Works.” 


You’ll experiment on your own. The approach here is to give you quick, 
useful examples of how things work across all these products. In some 
cases, the examples can be fairly sophisticated. In most cases, though, 
it’s the basics. Our hope is that you'll take those basic examples and build 
your own, more complex ones on top of that, according to the complexity 
of your site. 


Macintosh versus Windows 


Macromedia Studio is both a Windows and a Macintosh product. In this book, 
you see us use the Windows commands, and the figures all show Windows XP. 
If you are using Macromedia Studio on the Mac, you can still do everything 
in Book VII if you’re using ColdFusion at your place of business or if your 
Internet service provider (ISP) supports ColdFusion. 


In general, you can convert between Windows (PC) and Macintosh key com- 
mands by using the following equivalencies: 


How This Book Is Organized 3 


+ The Ctrl key on a PC is equivalent to the Command (8) key on a Mac. 
+ The Alt key on a PC is equivalent to the Option key on a Mac. 


+ The Enter key on a PC is equivalent to the Return key on a Mac. 


How This Book Is Organized 


Like all the All-in-One Desk References, this book’s chapters are organized 
into minibooks. Most of the minibooks revolve around products, but one is 
geared toward the Web development process. The following sections describe 
each minibook in more detail. 


Book I: An Introduction to Building Web Sites 


Before we jump into the products in the Macromedia Studio suite, we want 
to frame the conversation around how Web sites get built: things to consider, 
organizing yourself, and so on. This minibook walks you through how to figure 
out what it is you’re really building and how you should go about preparing 
to build it. 


Book Il: Dreamweaver & 


Dreamweaver 8 is the crux of any Web development effort with Macromedia 
Studio, so naturally, this is a good place to start. In this minibook, you get a 
hands-on look at how you can use Dreamweaver to create and manage your 
Web sites, whether they’re more design-oriented (with Macromedia Flash) or 
technology-driven (with ColdFusion). 


Book II]: Fireworks 8 


Whereas Dreamweaver is the tool that helps you manage your Web site, 
Fireworks 8 is designed to spur your creative vision. This minibook shows you 
how to use the variety of tools in this impressive program to bring the look and 
feel of your site to life. It also shows you how to use Fireworks in conjunction 
with the other Macromedia Studio products (such as Macromedia Flash) 
effectively. 


Book I: Flash & 


Macromedia Flash 8 is probably the most exciting of the Macromedia prod- 
ucts. Flash delivers animation, sound, and interactivity to the Web like 

no other product ever has. If you’ve ever wanted to find out how to use 
this tool to add some new zeal to your Web site, then this is the minibook 
for you! 
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Book V: Contribute 3 


In this minibook, we introduce you to the newest member of the Macromedia 
Studio family, Contribute 3. Designed as a collaborative tool that turns your 
hard development work into an easy interface for non-techies to update and 
publish content to the Web, Contribute puts the power of building Web sites 
in the hands of the people you work with. In this minibook, you find every- 
thing you need to know to get you and your collaborators up and running 
with Contribute in no time flat. 


Book VÍ: FreeHand MX 


This is the minibook for the true illustrators. Whether the final product is a 

Flash-based or a traditional HTML-based site, FreeHand MX gives designers 

the tools they need to create compelling imagery. In this minibook, you find 
out how to turn your ideas into working graphical art to be used in a variety 
of Web applications. 


Book VII: ColdFusion MX 7 Developer Edition 


ColdFusion, once left for dead by many in the industry, now appears well- 
poised to lead mainstream Web development into the dynamic content arena. 
In this minibook, you too can find out just how easy it is to use ColdFusion 
to create dynamic Web sites. 


Icons Used in This Book 


Along the way, when there’s something of interest to point out, we toss in one 
of the icons you see in the left margin. When you see one, slow down for a 
moment to check it out to see what’s up! 


If there’s a way to make something easier, or a more commonly accepted 
way of doing something, we tell you about it. This is the icon to look for! 


When we really want to reinforce something, we throw in a Remember icon. 


Pitfall ahead! That’s what this icon is all about. If something could cause 
trouble, we let you know. 
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Because we love technology, you have to forgive us for geeking out every 
now and then. When we do, though, we let you know with this icon. 


TECH 





TO 
Oy 
S This icon highlights new features in the Macromedia Studio 8 suite of 
Q products. 


Where to Go from Here 


If you’ve read this far, then you may actually be a candidate for reading this 
book from cover to cover! From here, we suggest you dive right in to what- 
ever section you’re most interested in. Remember, all these minibooks are 
self-contained and don’t require you to read the others. So have at it. It’s 
buffet time, and your plate needs fillin’ up! 
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Chapter 1: Why Build a Web Site? 


In This Chapter 


Exploring the reasons that Web sites get built 
Finding your place on the Web 
Understanding what drives people to the Web 
Investigating common types of Web sites 
Getting ready to build a Web site 


S: you want to build a Web site? Well, congratulations! If you’re reading 
this book, then you’ve probably already purchased a copy of Macromedia 
Studio 8, and you’re ready to dive right in. Macromedia Studio is a fantastic 
tool that enables you to create a wide array of content and graphics to deploy 
on a Web site that is dynamic and easy to maintain. 


But software isn’t all you need in order to create a wonderful Web site. It also 
takes creativity, a good eye, a well-thought-out plan, and some serious soul 
searching about why you want to undertake this endeavor in the first place. 
This chapter offers some insight into how sites get built, why they are cre- 
ated, and who they are aimed at. So grab your pen and paper and get ready 
to jot down your own ideas about the great site that you want to build. 


Understanding Why People Build Web Sites 


In the early days of the Internet, all Web sites generally looked the same and 
served similar functions. Back then, an average Web site could be described 
as a big online book with linked pages. In short, in its infancy, the Internet was 
not all that interesting graphically and was severely lacking in interactive 
sophistication. 


All that has changed. Today’s Internet is a dynamic amalgam of text, graph- 
ics, interactive tools, commerce, and communication. If you are part of 

a business, an association, the government, or an academic institution, 
chances are a Web site supports some or all of your group’s mission. But 
not every venture requires a Web site, which naturally leads to the question, 
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Figure 1-1: 
A common 
product and 
service— 
style Web 
site. 





“Why build a Web site?” Most organizations and individuals establish a pres- 


ence on the Internet for one or more of the following reasons: 


+ To sell a product or service directly online, as shown in Figure 1-1 

+ To provide information or tools 

+ To provide an extension of — or support for — products and services 
+ 


To find other organizations or people to work in a particular area of 
interest 


+ To introduce and promote an organization and its mission 


+ To remain competitive with other organizations that are on the Internet 
already 


+ To promote community development by bringing groups of people 
together around ideas, people, or causes, either online or in person 


+ To share artwork, writing, or photographs 
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Finding Vour Place on the Web 


Before you begin to think about the kind of site you’re going to build 
(either for yourself or for your organization), you should consider each 
of the following questions carefully. Doing so can help you target your site 
to an appropriate audience and prepare yourself for the work ahead. 


WING, 
s 
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+ Consider your content: 


e What is the content going to be on your site? Is it unique? 


How often will you be updating this content? 


e Are there any other sites that already do what you want to do? If so, 


how will you differentiate your site? 


Consider the early explosion of sites during the dot-com boom. At one 
point, more than five pet sites were all trying to hawk their wares to users. 
Only one survived, and that was because it was a traditional retailer first. 
Market saturation is a sure way to spell doom for your venture, so be sure 
to check out the competition first! 


+ Select a format and interface: 


In what formats will your content be delivered? Will you just use 
text and graphics, or will you also need animation and/or forms 
that respond to user input? 


What are the technical requirements needed to view your content? 
Will users need a video or audio player or plug-in? For example, to 
view a Flash animation, users need the Macromedia Flash Player 
plug-in. (Luckily, almost all users will have some version of the Flash 
Player installed, and if they need a more recent version, they can 
download it easily from www.macromedia.com.) 


+ Know your audience: 


What audience or audiences are you trying to reach with this content? 
Do they need or want it? 

Is there any other place they can get this content already? 

What are the demographics and technical capabilities of this audience? 


If your site has more than one audience, are there differences between 
them and do they need the content delivered differently? If so, you will 
want to take advantage of ColdFusion’s dynamic scripting language 
to deliver different content to different audiences. 


+ Manage your workload: 


How much time and effort are you willing to give in order to support 
this site? 


Are other people working on the site with you? 


Who’s going to create the graphical design for the site? Of course, if 
it’s you, you’ve got powerful tools at your disposal with Macromedia 
Studio 8. 


e Are there any deadlines you need to keep in mind when developing 


your site? 


Book | 
Chapter 1 


¿US Gam 
e pying Ayn, 


12 = What Drives People to the Web 


These questions have no right or wrong answers. Instead, they’re designed 
to help you formulate an idea of where you’re going when you’re building a 
site. Frankly, if you’re building a personal site, then these questions are moot 
to some degree because you can build whatever you want and it may not 
matter whether someone else can read it or see it. Of course, if you’re think- 
ing about selling your new products on the Web, then these questions can 
be critical to your overall business success, not just your Web site’s success. 
For example, if you find that a number of other sites have similar products or 
a similar focus to what you had in mind for your site, you may consider not 
building a site at all or changing the focus of the products you are selling. 


What Drives People to the Web 


What kinds of services, you may be wondering, are people looking for on the 
Internet? Eight or nine years ago, the Internet was largely a research medium, 
meaning that people would hit the Internet to try to find information about 
something fairly academic or obscure. This is not surprising, given that uni- 
versities were the first groups to start putting their content online. 


Today, the number of reasons people head to the Internet has grown dramat- 
ically and includes the following: 
+ To research, compare, and purchase products 


+ To find and interact with other people (business colleagues, friends, 
romantic interests) 


+ To get daily news and information delivered in real time 


+ To search for and find information about any topic or organization of 
interest 


+ To deliver and promote their own messages and products to others on 
the Web 


+ To watch or listen to events, online and otherwise, delivered in a variety 
of audio and video formats 


+ To educate themselves via online classes and enrollment in universities 


+ 


To play games and entertain themselves 


+ To complete all sorts of personal and professional tasks that can now be 
done securely online, such as online banking, personal finance, invest- 
ing, tax submission, travel, donating, and procurement 


These items run the gamut of professional and personal, and they cross demo- 
graphic lines. What is common among most online users, though, is that they 
begin their online usage with a focused purpose, and that focus then bleeds 
over into surfing for things that interest them throughout the Web. 
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Choosing the Right Type of Web Site 


For all its diversity in content, the Internet really doesn’t have that many dif- 
ferent types of Web sites. Why do so many Web sites look alike? The main 
reason is that people want their sites to be easy to use, free (or close to it), 
and similar to other sites they've seen or experienced. This has resulted in 
the emergence of some standard types of Web sites. A number of compo- 
nents for these sites can be found in ColdFusion. Where applicable, we’ve 
noted it in the following list. The most common types of sites include 


+ The Product Site: The most common type of site. Generally, the site offers 
some basic information about a company, its products, staff members, 
perhaps a product demo, and a way to contact the organization to get 
more information. Examples of this kind of site would be www. symantec. 
com, www.amf.com, and www.nadelectronics.com. 


+ The Commerce Site: A storefront on the Internet. Whether it’s a single 
company that carries just its own specialized products or a retailer that 
sells a wide array of products, these sites are geared toward selling 
products and offering accessories to complement those products. 

An example of this kind of site is www . macys . com. ColdFusion offers 
tools that can help you add a shopping cart, a search function, and 
more to your site easily. 


+ The Portal Site: A site that aggregates content from a wide variety of 
sources. Portal sites tend to be rich in content and links but short on 
graphics. The idea is to provide users with a launching pad to other 
destinations on the Internet, though in recent years, many of these 
portals are adding features to try to keep their users on their own site. 
An example of this kind of site is www. yahoo.com. ColdFusion includes 
robust search capabilities that enable you to have more content-rich 
sites that are easily indexed and searched. 


+ The News Site: A site that, in general, mirrors an offline counterpart, 
such as ABC News. These sites provide a lot of the same information 
as their offline counterparts through the use of text, video, audio, and 
graphics, and also provide services geared toward the online audience, 
such as chat sessions, newsletters, and personalized content. An exam- 
ple of this kind of site is www. cnn.com. ColdFusion includes tools for 
adding chat to your site as well. 


+ The Application Site: A type of site that offers perhaps the greatest diver- 
sity of all the sites. Application sites are geared toward a specific purpose, 
such as banking, investing, automobile purchasing, travel planning, photo 
galleries, event planning, or online greetings. Some of the commonalities 
among these sites include user accounts, password protection, and the 
widespread use of e-mail campaigns to try to keep users coming back. 
Examples of this kind of site include www. egreetings.com, www. 
imotors.com, and www. bankofamerica.com. 
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+ The Personal Site: Personal sites also offer a great deal of variety in their 
design and function. Personal sites usually include some of the designer’s 
work, opinions, and rants; links to other sites; and pictures. Examples of 
this kind of site are www. Loungeboy . com and www. katswindow.net. 


Macromedia Studio 8: Vour Ally in Development 


After you’ve answered a number of the questions in the “Finding Your Place 
on the Web” section, you may be wondering how you’re going to build your 
grand Web site. Well, don’t fret. With Macromedia Studio, you have the most 
complete, user-friendly, and popular development suite on the market. Even 
though professionals use these products all the time, the programs in the 
Macromedia Studio suite are truly designed to empower the first-time Web 
developer. With an array of tutorials, wizards, and interfaces that keep you 
as distant from the code as you want to be, Macromedia Studio makes the 
Herculean task of building powerful Web applications seem like just another 
project. 


The goal with Macromedia Studio is to help you, the developer, build 
compelling and powerful Web sites in the shortest amount of time, while 
simultaneously helping you alleviate cost and resource issues common to 
Web development. Macromedia Studio includes several tools to help make 
this happen: 


+ Dreamweaver 8: The premier tool for easily building Web pages. You can 
use Dreamweaver to generate and edit ColdFusion code, which makes 
developing dynamic Web applications much easier. 


+ Fireworks 8: A leading tool for the graphical development of a site. 
Fireworks helps you design the look and feel of your site, as well as 
prepare the graphics for inclusion in an HTML or CFML file. 


+ Flash 8: The world’s most popular tool for adding animation and sound 
to Web sites. Flash will truly change the way any site works. 


+ Contribute 3: Collaborate with others and take all the development 
hassle out of building (and maintaining) Web sites with Contribute. 
Using this tool in combination with Dreamweaver will help you design 
Web sites in such a way that just about anyone in your organization who 
can use a word processing program will be able to add and modify con- 
tent on the site. 


This book includes information about two other Macromedia products you 
may want to use in developing your site. Formerly part of the Studio suite, 
they remain powerful tools for performing specialized site-building tasks: 


> 


+ 
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FreeHand MX: The Web developer’s best friend for creating complex 
vector illustrations for use in Fireworks and Flash. 


ColdFusion MX 7 Developer Edition: Give yourself the powerful tools 
to add databases, connectivity to e-mail servers, and other dynamic ele- 
ments to your site. ColdFusion allows you to take control of one of the 
most powerful — but also easy to learn — scripting languages for the 
development of compelling Web applications. 


Before Vou Start: Things to Know 


Hopefully, all this information hasn’t scared you into dropping this book and 
deciding to open a lemonade stand instead. This last section is just a quick 
check of some things you should be aware of before you jump into this ven- 
ture called Web development: 


+ 


+ 


Plan ahead. Building a Web site always takes longer than you think, so 
give yourself more time than you originally planned for! 


Get organized. Remember to categorize your content and use those cat- 
egories as the initial architecture for your site when you’re doing the 
user interface design. 


Always do the user interface design before the graphics design. The user 
interface design specifies how your site will work, while the graphical 
design is the look and feel. If you do the graphics before the architecture 
is done, you'll likely end up redoing a lot of your design after you've fig- 
ured out how your site is going to work. 


Not all browsers are the same. Internet Explorer and Netscape Navigator 
are the two most common browsers, and in recent versions, they’ve 
adopted the same standards. But there are still quirky differences between 
the two browsers, and you have to check your work on both browsers. 


Not all platforms are the same. If only they were! Explorer and Navigator 
work slightly differently on the Mac, in Windows, and in Unix. If you’re 
developing on the PC, find a friend or a graphic designer with a Mac and 
check your work on her system as well. Dreamweaver also includes some 
tools to help you verify whether your site works the way you hope it does 
on a variety of platforms. 


Learn from sites you like. If you like the way a page looks — but can’t 
imagine how such a design could have been translated to the Web — 
you can view the source code in your browser to see how the page was 
constructed. Seeing how other people have coded their pages can spur 
you on to create your own unique designs. 
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Lots of stuff can be had for free. The Web is filled with geeks like us 
who have made all sorts of crazy applications, like chat engines, bulletin 
boards, and even wholesale applications. A lot of them can be had for 
free or something close to it. This is where sites like www. google.com 
and www. download.com can be your friends. 


Old content equals a dead site. You have to be prepared to update your 
site on a semi-regular basis. When content is stale, people will notice, 
and they will stop coming. 


If you build it, tell someone. It’s one thing to build a site. Site-search spi- 
ders will eventually find you, but if you really want to be seen, then you 
really need to promote yourself. When you’re done building, remember, 
it’s time to start promoting. 


Don’t be afraid to ask. Building sites can be fun, but it can be especially 
frustrating if you can’t figure out how to do something. Well, here’s a 
secret: Developers like to talk about what they do. So if you’re stuck, try 
finding a user group or searching the Web for an answer to your question. 
Someone may have come across the problem before, and if they haven’t, 
then there are plenty of resources for the asking. Macromedia is also very 
good about supporting these kinds of groups, so you can always check out 
its Web site at www.macromedia.com for listings of developer resources. 


Chapter 2: Developing 
Web Content 


In This Chapter 


Developing content: An overview 
Organizing your content 
 Categorizing Web content 
Creating your content 


Prepping your content for the Web 


0: of the things you find out when you do Web development for a 
living is that the Internet is all about repetition. No matter how many 
sites you build, the discussion always begins with “So, what’s the content 
gonna be for this site?” Usually, the response is a blank stare. Companies, 
organizations, and individuals usually come to the conclusion that they need 
a Web site long before they’ve thought about what should be on that site. 


Some basic rules of content development are common to all Web sites. 
This chapter gives you the basics to consider as you’re doing perhaps the 
most important part of building your Web site: contemplating, designing, 
and creating your content. 


Developing Content: A Four-Step Process 


Developing your content strategy can be the best part of building a Web site 
because it’s the one time you can sit around a table with your fellow colleagues 
(or your trusty pet, if you’re building a personal site) and truly be creative 
about the kinds of things you want to represent you or your organization on 
the Web. 


Content development follows a fairly structured course in the modern world 
of Web design. It usually includes the following four basic steps: 


1. Brainstorm the types of information that you want to include on your 
Web site. 
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2. Put that information into categories that make sense for the type of Web 
site you’re building and the way you want users to interact with the site. 


3. Gather and create the content for the site. 

4. Prepare your content for the Web. 
A great temptation is to just start building a site the moment something cool 
comes along, be it an idea, a graphic, or even words. The reason to do all this 
planning before even cracking any HTML code in Dreamweaver or generating 
any graphics in Fireworks is to make sure that you don’t get too far down the 


path of development and suddenly find yourself painted into a corner, trying 
to put content where it doesn’t really belong. 


Choosing and Organizing Content 


You may be wondering just what, exactly, is considered content. Here’s a 
little content quiz consisting of three simple yes or no questions: 
1. Is a mailing list sign-up form, as shown in Figure 2-1, considered content? 
2. Is a downloadable file considered content? 


3. Is a picture of a product, or even of your pet ferret, considered content? 
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Figure 2-1: 
Hmm... is 
this content? 
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The answer to all these questions is yes. In practical terms, every single 
thing you put on a Web site is considered content. 


Classifying common types of Web content 


The fact that everything is content doesn’t really help you get your site organ- 
ized. Thankfully, while anything can be content, things tend to show up on 
Web sites in some pretty common formats. 


As you begin to think about what you want to put on your Web site, you 
should also consider the different forms that you want that content to take. 
To give you a kick-start, Table 2-1 includes the most common forms of con- 
tent and the data that makes up that content. 


























Table 2-1 Common Types of Web Site Content 

Content Type Data Commonly Associated with This Type of Content 

Graphics GIF and JPEG files 

Document Word, Excel, PowerPoint, FlashPaper, and Adobe Acrobat (PDF) files 
Text HTML text 

Audio WAV, AIFF, MP3, Real Audio, and Windows Media files 

Video QuickTime, Real Video, Flash Video, and Windows Video files 

Plug-ins Flash animations, QuickTime VR, IPIX, and other tools that allow users to 


view video and graphic content beyond what basic HTML can support 





Forms Elements within HTML designed either to submit information or to return 
targeted content back to a user's browser 





Categorizing your content 


In addition to organizing your content by its file type, assigning meaningful 
categories to your content makes developing your site infinitely easier. 
You can organize your content in any way that makes logical sense for 

the site you’re building. Most of the time, a single piece of content can be 
categorized in more than one way, so don’t worry about limiting yourself 
to just one classification method. 


The following list includes some of the most common ways to categorize 
content: 


+ Organizing by concept: Although it varies from site to site, this method 
entails organizing your site by the major thematic elements, as defined 
by the content that you’re going to be putting up. An example of this is 
organizing a company site around the various products it offers. 
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Creating Content for the Web 


+ Classifying by function: Functions are things you can do on a site and 


can serve as organizing principles for your site. For example, a financial 
services company may categorize its content around a series of investing 
and banking tools. In fact, that financial services company may choose 
to categorize its content not only by the tools on the site (functions) but 
also by the various products it offers (concepts), which demonstrates 
that there’s more than one way to slice content. 


Categorizing by logical steps: Some sites dispense with the notion of 
concepts or functions altogether and focus on tasks that get something 
done. Online auto sites, for example, like to walk visitors through a series 
of steps to find the car they’re looking for, offering related content at 
appropriate points along the way. 


Sorting by topics or keywords: Sites with a diverse array of content tend 
to offer users a couple of ways of getting at information. Keywords (topics) 
are a common way to associate content with more than one area of inter- 
est. For example, a music store may organize its site by concepts such as 
instruments, sheet music, and accessories, and sort the content by topics 
such as pianos, drums, guitars, amplifiers, and flutes, to name just a few. 


Arranging hierarchically: This method of categorization assumes that 
some content elements are more important than others, which is reflected 
in how the content is displayed on the site. Hierarchy is often used in 
conjunction with another categorization scheme. To go back to the bank- 
ing example for a moment, imagine that you’ve got your portfolio online. 
Usually, your portfolio is organized by concept or function as well as by 
hierarchy. The portfolio is given more prominence than the other prod- 
ucts the bank sells because the folks at the bank know that the content 
in the portfolio is more important to the user. 


Grouping by type: As noted in the previous section, content type is the 
other major way to categorize content. On a number of media sites, such 
as the ABC News site (www. abcnews . com), you can easily find all the 
video content in a single location, in addition to being able to get your 
news by feature area. 


Creating Content for the Web 


If you’ve got the right tools, creating content for the Web is a breeze. And 
because you’ve got a copy of Macromedia Studio 8, you’ve already got a host 
of tools that can help you create all sorts of content for your site. To recap, 
here is a list of some of the content you can create with the products in the 
Macromedia Studio suite: 


+ Fireworks 8: Create quality photorealistic graphics that can be used in 


Dreamweaver or Flash. 
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+ Dreamweaver 8: Create pages from basic HTML to complete database- 
driven applications, as well as use the publishing tools to help you 
maintain your site. 


+ Flash Pro 8: Create animations that bring your site to life. 


+ Contribute 3: Have nontechnical colleagues add and modify content 
on the site in both the development and maintenance phases of the 
Web site’s life. 


Depending on your needs, you may also find these other Macromedia appli- 
cations handy: 


+ FreeHand MX: Make illustrations that can be used to create the look and 
feel of your Web site or your Flash movie. 


+ ColdFusion 7: Create dynamic, database-driven applications. 


In addition to these tools, you'll find that other non-Macromedia software 
tools can be essential to generating and managing content: 


+ Microsoft Word: Word is the most common word processor in the world 
for a reason. When you're creating text for Web sites, there’s still no better 
tool than Word for quickly and easily creating text. 


+ Adobe Acrobat: The Acrobat PDF format remains the downloadable doc- 
ument format of choice in the Web world. If you’re going to develop large, 
professionally-designed text- and image-heavy documents for the Web, 
then investing in the full version of Adobe Acrobat is worth the money. 
PDF files ensure that your documents will always have the same look and 
feel, regardless of what browser or platform users may have. Offering 
PDF files for download will also make your users happy because they 
only need to download the free Adobe Acrobat Reader to read your 
PDF documents. 


+ Microsoft Excel: As a spreadsheet, Excel can serve two very useful pur- 
poses: It can help you manage your content by providing you with a 
nice tool to wrangle your categorized data, and it can also save data in 
CSV format, which is the most common data format for importing into a 
database. So, for example, if you are providing your users with a list of 
the names and addresses of people in your association, then you might 
consider providing the information in CSV format so that users can 
import the contact information directly into their own address books. 


+ Microsoft Access (or equivalent): Access is a database. If you create an 
e-commerce site, you’ll find that your product data is best kept in a data- 
base rather than in plain text. Access is the most commonly available 
database (though not necessarily the most robust), and is easily com- 
patible with ColdFusion. 
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Prepping Content for the Web 


When preparing your content for delivery to the Web, here are a few handy 
tips to keep in mind: 


+ Have a plan. If you haven’t gone through the process of content devel- 
opment outlined previously in this chapter, your content is likely to be 
disorganized. Be sure you have an overview of your content, as well as 
an outline that shows all the various formats that your content will take 
and how you’re choosing to categorize it. 


+ Choose the right format. Take a long, hard look at your content. Are you 
using the right format for certain types of content? Are your graphics in 
acceptable formats, such as GIF and JPEG? Are your downloadable items 
in PDF or FlashPaper format? Be sure you’re using the commonly accepted 
Web file formats, and if you’re not, be sure to create some text to explain 
why you’re not using standard formats. 


+ Be consistent. The Web relies on developers being at least somewhat con- 
sistent. So if you have a product data sheet available in PDF format, make 
sure that your other documents are in PDF format. Similarly, try to stick 
to the same audio and video formats. That way, when people get to your 
site, they'll know what to expect, and they’re not likely to get frustrated. 


+ Make your content easily digestible. One last thing to keep in mind: 
Just because you’ve written the Great American Novel and you want to 
put it on the Web doesn’t mean that you should just put the whole thing 
up in one huge piece. The Web is made to deliver content in small chunks, 
and the best sites give viewers the facts first and then let people delve 
deeper at their leisure. Remember, people are busy, and they may just 
need to get the facts quickly. For you as the developer, this means creating 
highlights, summaries, thumbnails, or charts that provide an introduction 
or an overview to your core content. 


Chapter 3: Choosing the 
Right Tools for the Job 


In This Chapter 


Developing a Web site with Dreamweaver 
Using Fireworks for design 

 Animating with Flash 

Creating illustrations with FreeHand 

¥ Using ColdFusion to add dynamic content 


Maintaining your site with Contribute 


ou’ve probably heard that old saying, “A craftsman never blames his 

tools.” Nowhere is that saying more appropriate than with Macromedia 
Studio 8. With six incredibly powerful tools at your fingertips, you can 
create compelling and dynamic sites in no time flat. 


Of course, even though a craftsman never blames his (or her) tools, a crafts- 
man does need to know which tools to use for a given job, and sometimes, 
in the world of Web development, that’s not always so clear. This chapter is 
designed to clarify this issue by highlighting the dos and don'ts of each of 
the Macromedia Studio products. 

ar 
If you’re already familiar with the products in Macromedia Studio, then just 
take a gander at the following section and then head right to Book I, Chapter 4. 


Before Vou Begin: When Not 
to Use Macromedia Studio 8 


Although you certainly can use Macromedia Studio for every bit of your site 
development, some things are better done outside the tool suite: 


+ Content development and management: This is the process of develop- 
ing the written content for the site, as well as managing the collection and 
status of each piece of content on the site. Products like Microsoft Word, 
WordPerfect, Microsoft Excel, and Microsoft Access are more appropriate 
tools for this job. 
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Using Dreamweaver 8 for Web Development 


+ Project management: This is the process of managing the steps of the 
project from start to finish, as well as where and how to allocate resources 
to the project. You may want to use Microsoft Project or Microsoft Excel to 
manage your project. 


Using Dreamweaver 8 for Web Development 


«e 


No matter how graphics-intensive or dynamic you want your site to be, 
you'll always come back to the fact that you have to build your Web site with 
something. In Macromedia Studio, Dreamweaver is the Web development 
workhorse. You can use Dreamweaver, shown in Figure 3-1, for a host of 
practical Web development tasks: 


+ Create and edit HTML or ColdFusion Markup Language code (or code 
using ASP, JSP, XML, and the like). Dreamweaver 8’s Code Collapse and 
Zoom features make editing code easier than ever. 


+ Create “Sites” — a confusing Dreamweaver term that means a location 
either locally on your computer or on a remote server where you keep all 
the content for your Web site. When your content is in a Dreamweaver 
Site, you can set up page templates and run various reports on your site 
content. 


+ Upload all your Web pages from your local computer to a Web server on 
the Internet that houses (or hosts) your site. 


+ Set up connections between your Web site and a database to make the 
site dynamic. 


+ Preview your work using Macromedia’s Preview in Browser tools before 
you publish it on the Web. 


+ Review code for errors and badly formed code. 


The best way to think of Dreamweaver is as the glue that binds your site 
together. Other Macromedia products like Flash and Fireworks help to add 
flair and pizzazz to your site, but to actually assemble and include the files 
that these applications produce in your site requires the HTML and publish- 
ing tools that only Dreamweaver offers. 


Ultimately, most of your content ends up in an HTML or CFML (ColdFusion) 
page (or, depending on your server technology or content distribution needs, 
an ASP, JSP, XML, or other kind of page), so if you don’t have Microsoft Word or 
WordPerfect, Dreamweaver can also be used to create content as you would 
in a word processing program. 





Figure 3-1: 
Use Dream- 
weaver for 
many Web 
development 
tasks. 
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Designing with Fireworks 8 


Fireworks is easily the most versatile of all the tools in Macromedia Studio. 
As shown in Figure 3-2, Fireworks is primarily geared towards creating the 
graphical design of your site. With Fireworks, you can accomplish the follow- 
ing tasks: 


+ 


+ 


Create graphical elements that make up the look and feel of your site by 
using the Fireworks text and editing tools. 


Apply filters that create photo-quality effects for the imagery in your site. 


Manipulate text to be used in graphical elements such as navigation but- 
tons and banners. 


Use layers to manage the depth and positioning of elements on the 
screen during your graphics development. 


Slice up your page design into multiple images in preparation for integra- 
tion into HTML using Dreamweaver. (See Book III, Chapter 6 for more 
information about slices.) 


Optimize the size and color of images on your site. 
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Figure 3-2: 
The very 
versatile 
Fireworks. 
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These are just the core elements of Fireworks. In addition to being a powerful 
graphics development tool, Fireworks also incorporates elements of FreeHand, 
Dreamweaver, and even Flash, providing you with additional functionality, 
such as the following: 

+ Creating vector images that can be used in Flash animations. 

+ Creating basic animations and publishing your images as a Flash movie. 


+ Creating image rollovers that are common to most sites nowadays using 
the JavaScript scripting language. 


+ Generating the HTML to accompany your sliced images. 


Creating Animation with Flash 8 


After you’ve got a few Web sites under your belt, you may find that HTML 
and graphics alone seem lifeless. Sure, they’re necessary, but soon you'll 


Figure 3-3: 
Flash 
changes 
the way 
you think 
about a site. 
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begin to wonder what else you can do to add some pizzazz to your 
sites. That’s where Flash comes in. Enter Flash, which enables you to add 
animation, sound, video, and interactivity to your site. 


Flash, shown in Figure 3-3, can radically change the way your site works, 
allowing you to create a more compelling user experience. Gone are the 
boundaries created by HTML and limited graphics. Although you still need 
help from the other Macromedia Studio products, you can think of Flash as 
an entirely new development platform for building your site. 


In order to view the Flash movies you create, visitors to your site will 
need to have the Flash plug-in installed in their browser. Luckily, almost 
everyone with a standard graphical Web browser like Internet Explorer, 
Netscape Navigator, Firefox, or Safari has some version of the Flash plug-in 
installed. 
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28 Illustrating with FreeHand MX 


Illustrating with FreeHand MX 


Figure 3-4: 
FreeHand 
in action. 


Although many of the tools in FreeHand MX are identical to those you find 
in Fireworks, FreeHand offers illustrators and Flash animation developers a 
greater degree of control and integration in their work. 


Some of the things that distinguish FreeHand (shown in Figure 3-4) from 
Fireworks include the following: 

+ A wider array of line art creation and manipulation tools 

+ Greater control of styles 

+ Better color management tools 

+ Increased integration with Macromedia Flash 

+ More import and export options 
These distinctions may seem a bit subtle, and to some degree they are — 
that’s why FreeHand is no longer officially part of the Studio suite. However, 
when you get down to the nuts and bolts of building Flash animations, you'll 


see that FreeHand provides nearly seamless integration with Flash, offering 
you a more diverse palette for developing compelling animations. 
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Creating a Dynamic Site with ColdFusion 7 Book | 


Chapter 3 
Static HTML only gets you so far with Web development. After you’ve built 


that first-generation site, you may soon find that your Web site development ey = 
needs have grown and you require more from your development tools. What a. 
do we mean by more? Well, imagine you want to do any of the following: ce 
+S 

+ Customize the content of a site based on how a visitor got there. a as 
oe’ 

+ Personalize the site by letting users choose their own content. AE 


+ Open a store on the Internet with a host of product information con- 
tained in databases. 


+ Create interactivity in your site with the use of forms. 
All these items go beyond what Dreamweaver or Flash can provide as devel- 


opment tools. After you hit this proverbial Web development wall, it’s time 
to turn to ColdFusion, which provides the following tools: 


+ A custom scripting language that enables you to query databases, create 
and test variables, and extend the functionality of your site through the 
use of specific ColdFusion tags and functions. For more information 
about ColdFusion’s scripting language, be sure to check out Book VII. 


+ An application server (a program on a computer that serves a specific 
function) that reads the custom scripting language and turns it into HTML 
that people can see in their browser. 


+ An administrative component that enables you to configure all the differ- 
ent elements of your site, such as databases, virtual directories, log files 
that capture site tracking information, and e-mail features. 


Managing Vour Site with Contribute 3 


By adding Contribute to the Macromedia Studio family, Macromedia provided 
developers with a new tool to help them manage the content on their sites. 
Designed for the layperson, Contribute allows you to manage a handful of 
Web development tasks quickly and easily, including: 

Creating and editing Web pages on a site 

+ Adding images and links to a page 

+ Creating tables and text 

+ Publishing pages to a Web site 


+ As site administrator, setting access permissions for all the above 
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Now, you may be thinking that sounds an awful lot like what you do 

with Dreamweaver. In fact, Contribute, in a nutshell, is a tool that allows 
nontechnical users to accomplish Dreamweaver-like tasks, including both 
site development and site maintenance, without forcing them to muck with 
(and possibly jeopardize) any of the underlying code structure of a Web site. 


During the development phase, if your site has many pages that share an 
identical design but need different content, the HTML developer can create 
a Dreamweaver template of the design, and nontechnical colleagues can 
create multiple pages based on the template using Contribute, each page 
with its own content, but all with a protected common layout. 


When the site is up and running, Contribute allows people with no knowledge 
of HTML to make changes to content on the site. And built-in safeguards pre- 
vent two (or more) people from making changes to the same page at the same 
time, and security settings allow the site administrator to control access to 
particular pages or sections of the site for groups or individual users. 


Chapter 4: Best Practices 
for Web Development 


In This Chapter 


Understanding the basic steps of Web development 
Setting your site requirements 

Ensuring a smooth Web site build 

Testing your site 


Involving the right people at the right time 


J- late-night, caffeine-fueled, build-it-as-you-go model of Web development 
was fine when the industry was just getting started. However, Web devel- 
opment today is a more standardized practice and is subject to repeatable 
processes, just like other areas of software development. The result of the 
growing maturity in the industry is a set of “best practices” for Web develop- 
ment. Think of a best practice as an industry-accepted, commonly-agreed-upon 
way of performing a task or set of tasks. 


Certainly, you can still build a Web site in more than one way. Best practices 
are designed just to give you some guidance in the following areas: 


+ Ensuring that the site is easy to build and maintain 

+ Helping you avoid doing unnecessary work on a site 

+ Confirming that your Web site is built according to industry standards 
+ Making certain that you involve the right people in the site development 


at the right time 


Each of the sections of this chapter deals with a common aspect of Web 
development and provides you with the key points for making that part 
of the development run smoothly. 


You should be aware that these tips and suggestions are not absolutes. 
Every site is a bit different, but you can use this chapter as a checklist 
guide for the kinds of things you can do. Your site may require more or 
less attention depending on your requirements. 
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Additionally, this chapter is limited to the general best practices for develop- 
ing sites. Each of the chapters within Book II through Book VII covers the best 
way to perform operations with each of the individual Macromedia products. 


Following the Best Path of Development 


The early days of Web sites saw a wide variety of methods and approaches 
to development, but today most common types of Web sites follow an 
accepted path from start to finish. Building a Web site involves six basic 
steps. The details within each step can be specific to the type of site you’re 
building — product site, e-commerce site, and so on — but the basic steps 
remain the same. 


Step one: Develop a site concept 


Before you can build a site, you must have a mission and purpose for it. 
This process involves asking yourself and your colleagues a number of 
questions about whom you’re trying to reach and why. Book I, Chapter 1 
includes more information on this process. 


Step two: Define your requirements 


After you’ve decided what your site is all about, you need to come up with 
some basic requirements for the site. Requirements are the minimum standards 
that the site must conform to. These requirements fall into the following 
categories: 


+ Feature requirements: The basic set of site features and the functional- 
ity those features need to have. 


+ Technical requirements: The minimum technical specifications for the 
site. Table 4-1 includes the common technical requirements for Web sites. 


+ Design requirements: The aesthetic and accessibility requirements for 
the site. Design requirements may include things such as using the proper 
corporate colors, and accessibility requirements generally include things 
like adding a text-only version of a site so that it can be read by text read- 
ers (such as browsers designed for the visually impaired). 














Table 4-1 Common Technical Requirements for Web Sites 
Requirement Best Practice Option 

Screen resolution 800 x 600 pixels 

Minimum browser support Internet Explorer 6.0 and Netscape Navigator 8 
Use of Web safe colors only No longer required, as almost all monitors can 


display 16-bit color 
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Requirement Best Practice Option 

Minimum connection speed 56 kilobits per second (Kbps) 

File extensions Should still conform to the standard “dot and three 
characters” (. htm, .cfm, .asp, . jsp) where 
possible 

Style sheets (Yes or No) Yes 

Dynamic HTML (Yes or No) Yes 

Web phone and PDA accessibility No 

Database of choice Microsoft SOL Server 





Step three: Generate content 

During this step, you work to generate the various types of text, images, and 
so on that will make up the content of your site. Book I, Chapter 2 covers the 
details of generating content for Web sites. 


Step four: Design the site 


This step covers four different aspects of design, and in general, they follow 
this sequence: 


1. Complete the feature design. 


In the second step of Web site development, you set out the requirements 
for features on the site. Here, you get down to the nitty-gritty and design 
exactly how those features will work. For example, if you want to collect 
mailing list information, you need to articulate precisely how the infor- 
mation is captured, what kind of response is sent to a user, and where 
the captured information goes. 


2. Work through the user interface design. 


The user interface design is the way the site works, minus the aesthetics. 
It includes the composition of pages and the structure and look of the 
content, and it applies the logic of the feature design above. 


3. Consider the graphics design. 


After the feature and user interface design are complete, your site is 
ready for the aesthetics. You may want to create graphics for logos, 
icons, navigation, sidebars, backgrounds, and other site elements. 


4. Complete the technical design of the site. 


Truth be told, you can do the technical design after you complete the 
user interface design, but usually it ends up being the last design step. 
You must design the technical components that enable all the features 
of the site to be realized. 
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Figure 4-1: 
The typical 
inverted L 
shape of 

a site's 
navigation. 


Step five: Build the site 


After you’ve completed the design step, you’re ready to start building the 
site. This includes generating all the code, supporting databases, generating 
HTML, and posting content. Building the site can take weeks, and you should 
keep a number of basic rules of development in mind when building your site. 
Here are the most critical ones: 


+ Work internally. Don’t do all your development work on the site for 


everyone to see. Be sure to work on the site either internally (on your 
corporate network or your personal machine) or on a different URL 
than the final address. This way you can make all the mistakes you like 
and the real world isn’t likely to see them. 


Go wide, then deep. A good strategy is to always build the structure of 
the site first, including the navigation, and then fill it in with the content 
within individual sections. Figure 4-1 shows the navigational structure of 
a typical site, with primary navigation running across the top and second- 
ary navigation running down the left. Primary navigation allows visitors 
to get to the main sections of the site, while secondary navigation allows 
visitors to “drill down” to specific pages in the section. 


Centralize your images. Centralizing your images makes finding images 
and generating the proper code that much easier. The norm is to include 
all images in a folder called images at the root level of your site. 
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Figure 4-2: 
Always 

comment 
your code! 
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Whenever possible, use relative paths. Using a relative path simply means 
that your links from one file to another within your site — HTML files, 
images, PDFs, and so on — are relative to the location of the file you’re 
currently working on. This makes changing links and moving things around 
in folders that much easier. Dreamweaver defaults to using relative paths. 
An absolute path (for example, http: //www.mysite.com/section/ 
page.htm) includes the site’s URL, which is not only cumbersome but 
also difficult to use during development. 


Keep filenames simple. Always keep your filenames in lowercase letters, 
and don’t include spaces in filenames, folder names, or URLs. This ensures 
that no matter what type of Web server your site is hosted on — Windows, 
Macintosh, or Unix — the files can be read by any Web browser. 


Use folders to segment your content. This provides your site with a struc- 
ture that makes finding and managing your content and code easier. 


Always comment your code. Commenting code is a common software 
development practice. As you’re writing your code, you add comments 
next to major features and functions so that someone else can understand 
your work if you’re not there to explain it to them. Browsers ignore com- 
ments when displaying the page (but you can see comments, if they’re in 
the code, by using your browser’s View Source command). If the code is 
logically laid out with comments, managing it is much easier. Figure 4-2 
shows what commented code looks like in Dreamweaver 8. HTML com- 
ments always appear in this format: <!-- comment here -->. 
JavaScript, ColdFusion, and other types of Web code each have their 
own comment conventions. 
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Do everything you can to protect your applications. Hacking is serious 
business, and the last thing you want to have happen is for your site to 
be compromised. Here are just some of the things you can do to ensure 
that your site is designed with security in mind: 
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e Always use digital certificates when sending users private information 
over the Internet. A digital certificate is a secure, encrypted digital key 
that ensures that only the user’s Web browser and the server that 
issued the key can see the data being transmitted back and forth. 
You can find out more about digital certificates at www. verisign.com. 


e If you’re doing e-commerce, don’t use Microsoft Access. Access isn’t 
nearly as secure as Microsoft’s SQL Server. 


e Never query a database directly for a user’s private information, such 
as username, password, or credit card numbers. With SQL, you can use 
stored procedures to query a database and mask the code from poten- 
tial hackers. While stored procedures are outside the scope of this 
book, you can read more about them in Anthony T. Mann’s Microsoft 
SQL Server 2000 For Dummies, published by Wiley Publishing, Inc. 


e Always try to build your applications in three tiers. A three-tiered 
application, the concept of which is shown in Figure 4-3, ensures that 
the business logic for your site is separate from your display code 
and your database logic. This is more secure, and it makes changing 
components of your Web application easier because of the modular 
nature of a three-tiered application. 


In the three-tiered model, the Web browser can only talk to an inter- 
mediary application or object (sometimes called a COM object) and 
can only pass a finite set of variables to this intermediary. In turn, 
the intermediary negotiates with the data layer to retrieve only the 
specified information, which it passes back to the display layer. This 
ensures that the end user can’t directly connect to the data layer. 


+ Set up a mechanism for sharing files. When you’re working on the same 
files with more than one person, set up a convention for sharing the files 
so as to avoid overwriting each other’s work. Dreamweaver comes with 
some source control tools that help in this process, as does Contribute, 
but you may not want to rely just on their built-in protections. You should 
have an agreed-upon procedure for working on the same files. 


Step six: Test and deploy your site 

Before you can launch your site, you need to test it. Although test plans vary 
depending upon the sophistication of the site, here are four good things you 
should do when testing your site: 


+ Check your site on multiple browsers. Testing your site on various 
current and previous versions of browsers ensures that it works for the 
largest possible number of users. You should also check on different plat- 
forms as well (PC and Mac at the least). If you test on the latest version 
of Internet Explorer, and on Netscape 4.x and 8.x, and Firefox, you can be 
pretty sure how your site will look to almost everyone who visits it. 


«e 





Figure 4-3: 
The three- 


Tier one Visual display layer (what the user sees) 


Tier two 
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You can find a wide variety of old versions of many browsers, including 
Netscape Navigator and IE, at http: //browsers.evolt.org. 


Try your site with different Web connections of varying download 
speeds. If you’re building your site at work, you may have a very fast 
Internet connection. Try viewing and navigating your site using a dial-up 
56 Kbps connection to see how well your site loads at that speed. If pages 
load within a few seconds, then your site is in good shape. 


Test all of your forms and features. Walk through each form, again prefer- 
ably on multiple browsers and operating systems, to ensure that all your 
tools and forms work properly. 


Enlist your friends and colleagues as site testers. The more people that 
look at your site, the better. You’re probably too close to the site by the 
time you’ve finished it anyway, and fresh eyes can see things you can’t. 
Also, other people are likely to give you good feedback on structure and 
ease of use. Ask a friend with good language skills to proofread the site 
for grammatical errors and misspellings. 

















Component layer 
(includes the business 
rules and logic for 
communication with the 
display layer and the 
data layer) 





Data layer 


(houses 


: Tier three : 
tiered model business 


of develop- 
ment. 





critical 
information) 
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Getting the Right People at the Right Time 


After you’ve finished testing your site, which generally takes at least a week, 
you should give yourself at least another week to fix any problems you’ve 
found during the testing phase. 


When you're ready to roll out your site, a good idea is to do a soft launch first. 
A soft launch is when you launch a site but don’t really tell anyone about it. 
People who already know something about you or may be looking for your site 
will start to check it out and may provide you with some additional feedback. 
But you won't be faced with a big barrage of people, and you'll have a chance 
to troubleshoot anything you may have overlooked in making the jump from 
working on a site internally to having a site out there live for the real world. 


Getting the Right People at the Right Time 


If you’re building a site on your own, then you are always the right person 
at the right time. In most cases, however, you’re building a site with a group 
of people. Some of these people are site builders, and others are around to 
approve content and give general direction. Keeping all the parts moving 
smoothly can be tricky. The following sections help you get the right people 
on board at the right time. 


Building a team 


Just how big is this project you’re working on? How much money do you have 
to spend? When do you need it done? The answers to these three questions 
let you know just how many people you need to complete your site. If you 
plan to assemble an internal team to build your site, these are the roles that 
you absolutely need: 


+ Producer: Perhaps this is you. The producer (sometimes also referred 
to as a Project Manager) manages all the internal and external resources 
of the project. This means keeping the master budget and schedule, and 
providing all the resources with their tasks and deadlines. Essentially, the 
producer is the conduit that keeps the project moving from start to finish. 


+ Programmer: Programmers come in all shapes and sizes. Some can 
only do HTML, while others are adept at building all sorts of software 
applications. If you’ve got a smaller project, you should only need one pro- 
grammer (who might also go by the title Engineer or Integrator), but if your 
project is larger, you should consider having an integrator for lower-level 
HTML coding and a senior programmer for more complex coding tasks. 


+ Designers: Again, if you’re building a smaller site, you can probably get 
away with having a designer who does both user interface design and 
graphical design. Alternatively, as the producer, you may be qualified 
to handle the user interface duties as well as fill the feature design role. 
The larger the site, the more you’d want to look at separate specialists 
for user interface and graphical design. 
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+ Content Specialists: Generating content is always overlooked in building 
a team. Whether you have a contract writer or someone internal to your 
organization who excels at collecting and synthesizing data, it’s always a 
good idea to have someone around dedicated to developing content for 
the site. 


+ Quality Assurance: Someone’s gotta test the site, and as we mention pre- 
viously, you’re probably not the ideal person to do it. The best testers 
are meticulous, accountant-types who like to poke and prod at things 
and find holes. A lot of times, this function can be contracted out. 


+ Approvers: Unless you’re building the site for yourself, then you’re prob- 
ably accountable to someone. Those would be your approvers, and yes, 
they’re an essential part of the team — ultimately, they are the ones who 
give you the yea or nay on whether your site gets up on the Internet! 


If you were to contract out these resources through a single firm or through 
a variety of independent contractors, you'd still be looking for each of these 
skill sets. The method of employment doesn’t really matter, though it’s 
worth noting that it’s generally cheaper to contract the resources yourself. 
Firms, on the other hand, offer complete teams, standardized processes, and 
an existing code base (prewritten and tested code) that you don’t generally 
get when you build an internal team from scratch. 


Involving the right people at the right time 

Knowing when to get people involved can be tricky. Ideally, you’d want every- 
one there all the time, but that can get expensive, so you want to get people 
onboard at the right time for the right tasks. Table 4-2 includes many of the 
key milestones in a Web development project and who you really need to 
have involved during each part of the process. 























Table 4-2 When to Involve People in the Web Development Process 

Key Milestone Who’s Involved 

Site conceptualization Everyone 

Requirements gathering Producer, designers, programmers, and approvers 

Generating content Producer, content specialists, user interface designers, and 
occasionally graphic designers and programmers 

Feature design Producer, user interface designer, and programmers 

User interface design Producer and user interface designer 

Graphic design Producer, graphic designer, programmers, and approvers 

Build phase Everyone 

Test and deploy Producer, quality assurance, programmers, approvers, and 


occasionally designers 
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Chapter 1: Introduction 
to Dreamweaver & 


In This Chapter 


Exploring the Dreamweaver 8 interface 

Choosing between Design view and Code view 

Choosing among Standard, Expanded Table, and Layout modes 
Examining your site with the Files panel 

Exploring toolbar buttons 

Using panels and inspectors 

Getting help 


Í you’re looking for a Web design tool that’s both easy enough for begin- 
ners and sophisticated enough for Web design gurus, you’ve come to 
the right place. Dreamweaver 8 from Macromedia is a powerful program 
that enables you to create almost any type of Web page. This chapter 
covers the Dreamweaver basics and introduces you to some of the pro- 
gram’s essential tools. 


Dreamweaver is the industry standard for Web site design and production. 
Whether you’re interested in creating a site for fun, such as an online photo 
album or a site devoted to one of your hobbies, or for business, such as an 
online store, Dreamweaver’s flexible interface provides simultaneous graphi- 
cal and HTML editing. In other words, using Dreamweaver, you can not only 
lay out pages like an artist, you can also fine-tune the associated code like a 
programmer. Additionally, Dreamweaver’s built-in FTP features enable you 
to upload your site to the Web in a snap, so that you can share your master- 
pieces with the world. 


Exploring the Dreamweaver 8 Interface 


With Dreamweaver 8, Macromedia continues the tradition of allowing you to 
choose from two versions of the Dreamweaver workspace — Designer style 
and HomeSite/Coder-Style — that debuted with Dreamweaver MX 2004. This 
selection allows you, the developer, to work in an environment that is best 
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Figure 1-1: 
The 
Workspace 
Setup dialog 
box appears 
when you 
start Dream- 
weaver for 
the first 
time. 





suited to your personal development taste: one geared towards WYSIWYG 
(what you see is what you get) development and one that is more code- 
oriented. 


Selecting a workspace on start-up 

When you start Dreamweaver for the first time, you’re asked to choose the 
way you want your workspace set up, as shown in Figure 1-1. You have two 
options: 





Workspace Setup 


Please choose the workspace layout you're most comfortable with. You can switch 
layouts lster in Preferences. 





> Designer HomeSite/Coder Style 


OK 








+ Designer: The WYSIWYG (What You See Is What You Get) interface, 
which shows the page you are working on much like it would be ina 
Web browser. This style is more appropriate for Web design novices 
working on basic HTML pages. 


+ HomeSite/Coder-Style: The style that shows the page you are working 
on as an editable text document, which is appropriate for experienced 
coders and for pages on which you’re editing ColdFusion Markup 
Language (CFML) or other dynamic code. 


You can switch between the two styles, or even combine them, at the click 
of a button. See the “Introducing the Document Window” section, later in 
this chapter, for details. You might even consider switching back and forth 
between modes as you’re learning HTML as this is good way to see the 
underlying HTML as it’s being generated. 


Introducing the new Start page 

After you’ve selected a workspace, when you launch Dreamweaver by double- 
clicking its icon on the desktop or by selecting it from the Windows Start 
menu, you’ll see a Start page, as shown in Figure 1-2. The Start page allows 
you to perform the following tasks with a single click of your mouse: 





Figure 1-2: 
The Start 
Page gives 
you one- 
click access 
to a variety 
of options. 
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+ Open pages you’ve recently edited: Simply click the filename of the 
page you want to open. 


+ Create a new page in one of nine formats: Simply click the type of page 
you want to create, from basic HTML to ColdFusion (CFML) to CSS 
(Cascading Style Sheets). 


+ Create a new Dreamweaver Site: Click the Dreamweaver Site icon (in 
the Create New column) to open the Site Definition Wizard, which guides 
you through the process of setting up the directory location, FTP infor- 
mation, server technology (if applicable), and more for your Web site. A 
“site” in Dreameaver is a collection of Web pages, images, and tools that 
allow you to more easily manage your Web sites. See Book II, Chapter 3 
for more in-depth details on Dreamweaver Sites. 


+ Create a new page based on Dreamweaver’s built-in samples: Click an 
option in the Create from Samples column to open the New Document 
dialog box and choose from the preset formatting options for that type 
of page. 
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The Start page also gives you fast access to a quick tour and set of tutorials 
for Dreamweaver, and to Macromedia’s Dreamweaver Exchange page, where 
you can find lots of nifty widgets that extend Dreamweaver’s capabilities. 
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If you find the Start page incompatible with your working methods, you can 
prevent it from appearing in the future by selecting the Don’t Show Again 
check box at the lower-left corner of the page. 


Introducing the Document Window 





Figure 1-3: 
The 

Design view 
approxi- 
mates what 
your page 
looks like 
ina Web 
browser. 





Your primary workspace in Dreamweaver is the Document window, which 
appears automatically when you open a page in Dreamweaver. In the 
Document window, you construct your individual Web pages using panels 
and dialog boxes to format your work. The three primary views in 
Dreamweaver are as follows: 


+ Design view: The graphical view of your document, as shown in Fig- 
ure 1-3. You can select this view by choosing View™Design. 


+ Code view: This view shows the underlying code of your document. You 
can select this view by choosing View™Code. 


+ Split view: As you may expect, this is a split screen view that includes 
both the Code and Design windows. You can select this view by choos- 
ing View™Code and Design. 
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You can toggle between these views easily at any time by clicking their cor- 
responding buttons at the top left of the Document window. 


When you have several documents open in a site, you can select which doc- 
ument you want to work on by clicking the document’s name at the top of 
the Dreamweaver Document window. You can also click the Site tab in the 
Files panel to work on an entire site. 


The Insert bar sits directly underneath Dreamweaver’s main menu. It gives 
you quick access to eight sets of buttons you can use to insert everything 
from tables to Flash movies to form elements in your page. To select one of 
the eight categories, click the Insert bar’s name (Common, Layout, and so 
on) and choose a new category from the drop-down list. 


Choosing among Standard, Expanded 
Table, and Layout Modes 


When viewing your document in either Split or Design views, you can view 
content using the Standard mode, the Expanded Table mode, or the Layout 
mode. The Standard mode is the default (Figure 1-3 shows a page in Standard 
mode in the Design view, with the Insert bar set to Common.). The Expanded 
Table mode makes it easier for you to select tables and cells (though if you 
want to resize the table or row or column, you need to do so in Standard 
mode). The Expanded Table mode is most useful for editing existing tables. 
The Layout mode provides a simpler interface for drawing and editing tables 
and table cells. 


Two special tools are available only when working in Layout mode: the Draw 
Layout Cell button and the Draw Layout Table button. A table created with 
the Draw Layout Table tool is shown in Figure 1-4. Both of these tools can 
help you generate tables or table cells quickly and easily in Dreamweaver, 
and are described in more detail in Book II, Chapter 2. 


To change to the Layout mode, select the Layout Insert bar at the top left of 
the Document window and click the Layout Mode button, or choose View 
Table Mode™Layout Mode, or use the keyboard shortcut Ctrl+F6. When you’re 
in Layout mode, press Ctrl+F6 or click the Layout Mode button to return to 
Standard mode. 


To change to Expanded Table mode, select the Layout Insert bar at the top 
left of the Document window and click the Expanded Table Mode button at 
the top of the Document window, or choose ViewTable Mode™Expanded 
Table Mode, or use the keyboard shortcut F6. When you’re in Expanded 
Table mode, press F6 or click the Expanded Table Mode button to return to 
Standard mode. Note: None of the table modes are available in Code View. 
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Figure 1-4: 
Atable 
drawn in 
Layout 
mode. 
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Examining Vour Web Site with the Files Panel 


Dreamweaver offers Web developers the opportunity to work on individual 
files that make up a Web site, as well as to manage their entire Web site, all 
through the Dreamweaver interface. This concept is called, not surprisingly, 
a Site; to avoid confusion, we call them Dreamweaver Sites. Dreamweaver 
Sites can include the following elements: 


+ HTML, CFM, ASP, and other files that make up the code of the site 

+ Graphics, such as GIF and JPEG files 

+ Documents, such as PDF and DOC files 

+ Directories (folders that might contain any of the above) 
Dreamweaver Sites are initially viewable within the Files panel (which is open 
by default; if the Files panel is not open, you can open it by pressing F8). To 
expand the Files panel so it fills your screen, or to collapse the panel back to 


panel size, click the Expand/Collapse button (the icon of the two-row, two- 
column box with an arrow in the middle, at the right of the panel). 


The Web site management tools for Dreamweaver Sites are designed to give 
you total control over the way in which your Web site is built and maintained 


Exploring Toolbar Buttons 4 g 


from your local computer. The key features of the Dreamweaver Site tools 
include 


+ Asset management tools that help you manage all the files that make up 
your site. For example, these tools keep track of all your files and the 
links between files. Anytime you move a file, the tools will change the 
related links in other files. 


+ Basic source control to ensure that files don’t get overwritten. These 
tools lock files so that when you’re working on a particular file, others 
on your team can’t edit that same file. 


+ Publishing tools that allow you to use FTP to upload the content from 
your site locally to the remote server where the site is housed. 


+ Utilities that create site maps, check links, check the HTML code, and 
run reports on who’s been working on what. 


Dreamweaver Sites are covered in more detail in Book II, Chapter 3. 
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Figure 1-5: 
The Files 
tab of the 
Files panel 
includes 
useful 
buttons. 





Dreamweaver provides you with a number of useful view buttons (shown in 
Figure 1-5 and Figure 1-6) that you can use to see different views of your site 
or to perform various functions. You can easily switch among views to exam- 
ine your site in different ways. Each Dreamweaver view offers specialized 
menus and tools to help you perform your work in that view. Certain views 
are available for an individual document or page, whereas other views are 
available for the entire site. At any time while you work, you can choose to 
preview your site in target Web browsers, which enables you to see your site 
from the user’s perspective. 
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Figure 1-5 shows the following site-related buttons from the Files panel: 
+ Connect to Remote Host button: Connects your local computer and your 
Web host, allowing you to transfer files between the two computers. 


+ Refresh button: Refreshes the panel’s view of files in the site if you’ve 
made a change to filenames or file structures outside of Dreamweaver 
while the program was open. 


+ Get File(s) button: Downloads (retrieves) documents and files from the 
host. 


+ Put File(s) button: Uploads (sends) documents and files to the host. 
+ Check Out File(s) button: Locks files for editing by a single individual. 


+ Check In button: Replaces files on the server and makes them available 
for editing by unlocking them. 


+ Expand/Collapse button: Makes the Site tab full-screen with remote and 
local files side by side. 


Figure 1-6 shows the following document-related buttons from the top of the 
Document window: 


+ Show Code View button: Enables you to view the HTML page code 
full-screen. 


+ Show Code and Design Views button: Allows you to view the HTML 
page code and the Document window at the same time. 


+ Show Design View button: Enables you to view the Document window 
full-screen. 


+ Check Browser Support button: Allows you to run a check on your code 
for browser compatibility. 


+ Validate Markup: Allows you to run a check on your code to see if the 
HTML code is well formed. 


+ File Management button: Click and then select Get to retrieve files from 
the Web site host, or select Put to send files to the host. 
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+ Preview/Debug in Browser button: Click and select to preview or debug 
in your browser(s). 


+ Refresh button: Reloads your page so changes to the code are reflected 
in the Design view. 


+ View Options button: Click to select options (such as Word Wrap in Code 
View and the Ruler in Design view) to assist you in viewing your page. 


+ Visual Aids: Hides and shows the various visual cues available to you in 
JER the Split and Design views. 
we 
S : Weds 
= Some of these items may be unavailable, depending on what view you’re in 
and what you have selected in a document or panel. Book II 
Chapter 1 


Using Panels and Inspectors 


You can use Dreamweaver panels and inspectors to enter details about all 
aspects of your Web site. These interfaces offer areas where you can add 
and format page features, set up navigation and behaviors, and manage the 
workflow of building your site. 
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Understanding the role of panels 


A panel typically provides information about all instances of a particular 
page feature. For example, the Layers panel lists information about all the 
layers on the current page. 


ay? The Tag Inspector panel gives you easy access to various properties and 
behaviors specific to what object you have selected on your page. The Tag 
Inspector panel updates continually, depending on what you have selected 
on your page (if you have nothing selected on the page, the panel displays 
properties and behaviors of the whole page itself, as shown in Figure 1-7). 
Note that the Tag Inspector panel’s name reflects the HTML or CFML tag 
being inspected. 


To switch among tabs in a panel, just click the tab names. 
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Getting Help 


Working with the Properties panel 


The Properties panel, like the Tag Inspector panel, changes based on the 
individual document object you have selected on your page and contains 
details on attributes of the object. For example, selecting text on a page 
opens the Text Property inspector in the Properties panel, where you can 
format the size, font, color, link, and other attributes of the text. (Figure 1-4 
shows the Properties panel with a Layout Table selected.) To make certain 
that the Properties panel is shown below the Document window, choose 
Window™Properties. 


The Properties panel has a small down arrow in the lower-right corner, called 
an Expander button. Click the button to enlarge the Properties panel to view 
additional formatting options. In an expanded Properties panel, click the 
small up arrow in the lower-right corner to collapse the panel. 


Getting Help 


Dreamweaver offers a variety of tools to help you find the answer to virtually 
any question you have about the program. The Help tools provide basic 
information for beginners, as well as advanced references detailing HTML 
and JavaScript code. 


You can get help by clicking the Help button — the small question mark — 
in the top-right corner of some panels. Similarly, you can open the Options 
menu in the top-right corner of any panel and select Help from the list. 


You can also access help by using the Help menu located on the main menu. 
Just choose Help and then you can select from a host of options. Some of the 
more popular ones include 


+ Getting Started and Tutorials: Gives you quick access to basic informa- 
tion to get you up and running quickly, as well as to step-by-step tutori- 
als where you can learn by doing. 


+ Using Dreamweaver: Provides definitions and itemized steps in per- 
forming routine Dreamweaver tasks. It contains Help Contents, Index, 
and Search categories. 


+ Using ColdFusion: Provides information about coding dynamic sites 
using ColdFusion technology. 


+ Reference: Opens the Reference tab of the Code panel offering a 
dictionary-style reference on CSS, HTML, Accessibility requirements, 
Sitespring tags, and JavaScript. You can also access the Reference tab 
of the Code panel by clicking the Reference button in the Document 
window. 
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+ Extensions: Provides assistance in performing more advanced 
Dreamweaver tasks, especially tasks involving the integration of adjunct 
programs, such as Macromedia Flash, with Dreamweaver. This help 
option contains nitty-gritty information about application programming 
interfaces (APIs) — specific software interfaces that allow you to inte- 
grate Dreamweaver with databases, the C and Java programming lan- 
guages, and much more. 


+ Dreamweaver Documentation Center: Connects you to the Web, 
where you can find constantly updated information on working with 
Dreamweaver, answers to frequently asked questions, and program 
extensions. You can also join a developer’s forum, where you can chat 


with other Dreamweaver users to get (and give) help. Book II 
Chapter 1 
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Chapter 2: Creating 
Basic Web Pages 


In This Chapter 


Setting ruler and grid options in the Document window 
Creating and opening pages 

Establishing page properties 

Working with text 

Working with images 

Adding links 

Working with tables 


Previewing your work 


T: most significant (and, fortunately, the easiest) process in building a 
Web site is creating the individual pages that convey the site’s content. 
Even if you plan on creating an ultrahip site chock full of animation and 
interactive forms, you spend the vast majority of your site-building effort 
constructing basic Web pages comprised of words and images. This chapter 
shows you how to set up, add color, and name individual Web pages. You 
also discover how to add basic elements such as text, graphics, and tables, 
to your pages. 


Setting Ruler and Grid Options 
in the Document Window 


Dreamweaver offers you complete control over how you work in the 
Document window by providing two guide tools — rulers and a grid — to 
help you lay out your work accurately. You can customize a variety of guide 
tool attributes, such as ruler increments and grid snapping, to suit your per- 
sonal preferences and speed Web page development. 
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Setting Ruler and Grid Options in the Document Window 


Here’s a brief look at all your options with rulers and grids: 


+ Turning rulers on and off: Using rulers — both horizontal and 
vertical — in the Document window can help you measure and position 
page elements. Toggle the rulers on and off by choosing View™Rulers™ 
Show or by pressing Ctrl+Alt+R. 


Moving and resetting the origin: By default, the origin, or (0,0) coor- 
dinate, of a Dreamweaver ruler is set to the upper-left corner of the 
Document window. You can reposition it to any coordinate in the 
Document window by clicking the origin cross hairs and dragging them 
to new coordinates, which can be useful if you want to use the rulers to 
position elements of a table whose upper-left corner doesn’t sit at (0,0) 
in the Document window. Reset the origin to its default position by 
choosing View™Rulers™Reset Origin. 


Changing ruler measurement units: You can change the ruler’s measur- 
ing increment by choosing View™Rulers and then choosing Pixels, Inches, 
or Centimeters. 


Viewing the grid: Dreamweaver provides a Document Window grid that 
can assist you in visually positioning and aligning page elements. You 

can toggle the grid on and off by choosing View®Grid™Show Grid or by 
using the keyboard shortcut Ctrl+Alt+G. The grid is shown in Figure 2-1. 


Activating and deactivating grid snapping: The Document window grid 
offers a snapping feature that causes a layer or Layout table/cell to auto- 
matically align precisely with the snap-to points you define, which can 
be useful when you draw, resize, or move a layer (see Book II, Chapter 5 
for the skinny on layers). You can toggle grid snapping on and off by 
choosing View™Grid™Snap to Grid. 





Adjusting page size 





When you design Web pages, you must con- 
sider how your target audiences will view them. 
People looking at your page may view it at any 
number of screen resolutions from 640 x 480 to 
1024 x 768 or beyond. Because pages appear dif- 
ferently at different resolutions, Dreamweaver 
offers you the ability to build your pages for a 
variety of monitor resolutions. The higher the 
resolution, the larger the workspace in your 
Document window. 


If you want to size your pages, you must be in the 
Design workspace, and your Document window 


can't be maximized in the integrated workspace. 
To size your pages, click the Window Size 
Indicator (the height by width numbers and 
downward-pointing arrow atthe bottom-right of 
the Document window) and select a standard 
size — for example, 640 x 480 — from the drop- 
down list. (The Selecting Edit Sizes option on the 
drop-down list allows you to specify any height 
and width dimensions you want.) 








Figure 2-1: 
The grid 
is on. 
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You can adjust how the grid appears in the Document window in the Grid 
Settings dialog box. To do so, open the Grid Settings dialog box by choosing 
View™Grid™Grid Settings and change any (or all) of the attributes that 
appear. When you finish, click the Apply button to view the effect of your 
changes. Click OK to accept the changes and close the dialog box. 


Creating and Opening Pages 


You have several ways to create a new page in Dreamweaver: 


+ On the Start page, scan through the Create New column and click the 
type of page you want to create from scratch. 


+ On the Start page, click one of the options in the Create from Samples 
column to open the New Document dialog box and make a new page 
with many common settings precoded. 


+ Choose FileNew or use the keyboard shortcut Ctrl+N to open the New 
Document dialog box, from which you can create pages from scratch or 
from templates. 


Book 


Chapter 2 
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Establishing Page Properties 


To open an existing page, do any of the following: 


+ On the Start page, click the name of the page in the Open Recent column. 
+ Double-click the page’s filename in the Files tab of the Files panel. 


+ Choose File™Open or use the keyboard shortcut Ctrl+O to summon the 
Open dialog box, which you can use to browse to the page you want to 
open. 


Establishing Page Properties 


ar 


The Page Properties dialog box provides you with control over how several 
key page properties appear, including the title of the page, page background 
color, link colors, and page margins. Selections apply only to the current 
page, not to the entire site. Open a Page Properties dialog box similar to the 
one shown in Figure 2-2 by choosing Modify™Page Properties or by pressing 
Ctrl+J. Then make changes to any of the following in each of the five cate- 
gories (Appearance, Links, Headings, Title/Encoding, and Tracing Image): 


+ Page Font, Size, Text Color, Background Color, Background Image: 
Choose a font or set of fonts from the Page Font drop-down list; add a 
style (bold or italic) if desired. Click the Color box next to each property 
and pick a color from the Web safe color palette that appears, or enter a 
hexadecimal color code directly in any Color Code text field. You can 
also customize your own colors by selecting the color wheel and entering 
either RGB values or Hue, Saturation, and Luminosity values, as shown in 
Figure 2-3. For more information about using colors for the Web, see Book 
II, Chapter 2. Book III, Chapter 3 includes information on how to use the 
color picker to select colors in both Dreamweaver and Fireworks. For 
Background Image, click the Browse button to locate the image file that 
you want to appear as the Document window background. If the image is 
smaller than the available background area, the image is tiled (repeated in 
a checkerboard fashion, like floor tiles) to fill the background. 


Even if you choose to use a background image, select a complementary 
background color — the color shows while the background image is 
downloading. 


+ Left Margin, Right Margin, Top Margin, and Bottom Margin: Enter a 
number (in pixels) in these text fields to set up margins that affect how 
your page appears in modern browsers. Enter a whole number for the 
number of pixels of buffer space you want between the left, right, top, 
and bottom edges of your document and the content of the document. 





Figure 2-2: 
The Page 

Properties 
dialog box. 





Figure 2-3: 
The color 
picker. 
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+ Link Font and Size, Color for Links, Rollover Links, Visited Links, and 


Active Links: Choose a font or set of fonts from the drop-down list; add a 


style (bold or italic) if desired. Click the Color box next to each property 
and pick a color from the Web safe color palette that appears, or enter a 


hexadecimal color code directly in any Color Code text field. You can also 


customize your own colors (see the preceding point on Text Color). 


+ 


Underline Style: Select an option from the drop-down list. 


Heading Font, Sizes, and Colors: Choose a font or set of fonts from the 
drop-down list; add a style (bold or italic) if desired. For as many of the 
six standard HTML heading levels as necessary, select a font size. If you 
choose a numeric value, the unit-of-measurement drop-down list to the 
right becomes active so you can select an option. Click the Color box 
next to each heading and pick a color from the Web safe color palette 
that appears, or enter a hexadecimal color code directly in any Color 
Code text field. You can also customize your own colors (see the preced- 
ing point on Text Color). 
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+ Title/Encoding: Enter a page title in the text field. This title appears in the 
title bar area of the window both during construction in Dreamweaver and 
when the page is viewed in a Web browser. Select an Encoding format if 
your site requires the use of non-Western fonts (Japanese or Cyrillic, for 
example). If your site is in English, you can leave the setting at the default, 
Western European. 


+ Tracing Image: Click the Browse button to locate the image file you want 
to use as a guide for laying out your Web page in the Document window. 
This feature is handy for developers who prefer to mock up a portion 
of their Web page design in a graphics program and then re-create that 
design in their Web pages. Tracing images appear in Dreamweaver only 
as a pattern to help guide you in creating an actual Web page; the tracing 
image never appears on the finished Web page. 


+ Image Transparency: Drag the slider to adjust the visibility level of the 
tracing image. At 0 percent, the tracing image is invisible; at 100 percent, 
the image is completely opaque. 


Click the Apply button to view the effect of any property you change. Click 
OK to accept your changes and close the Page Properties dialog box. 


Working with Text 


As we mention in Book II, Chapter 1, Dreamweaver has three different design 
views: Design, Code, and Split (Code and Design). The following sections apply 
when you’re working in the Design view or Split view of Dreamweaver. In these 
views, you can enter and manipulate text on a Web page in Dreamweaver 

by using similar procedures to those you use when working with a word- 
processing document. 


Adding, editing, and deleting text 

To enter text on a page, click in the Document window and begin typing. 
Your mouse pointer appears as a blinking cursor that moves along with the 
text you enter. When you reach the end of a line, the text automatically wraps 
to the next line. Dreamweaver automatically adds the associated code for 
your new text in the HTML for the page. 


To delete text from a page, in the Document window, select the chunk that 
you want to delete and press Backspace or Delete on your keyboard. 


You can also modify how text appears on a page by editing its font, size, color, 
alignment, and other attributes. To modify text in the Document window, 
click and drag to select the text you want to modify. The Properties panel 
loads the Text Property inspector, as shown in Figure 2-4 (the Tag Inspector 
panel also reflects the selection). If the Text Property inspector is not open, 


Figure 2-4: 
The 
Properties 
panel with 
the Text 
Inspector 
loaded. 
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choose Window®Properties to open it. In the Text Property inspector, 
modify any of the following properties: 


+ Format: From the Format drop-down list, select a default text style. 
Heading 1 is the largest style and Heading 6 is the smallest, but none 
of the headings correlates with a specific pixel size unless you set it to 
do so. Select Paragraph for the basic body text of your pages. Select 
Preformatted if you want spaces, tabs, and new lines in a paragraph to 
show up in a browser (ordinarily, when you add multiple spaces in a row 
or tabs to your HTML — this is particularly obvious in the Dreamweaver 
document’s Code view — they appear as single spaces in a browser). 
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+ Font: Select a font face from the Font drop-down list. Browsers show your 
text formatted as the first font in your selection that resides on the user’s 
computer. Choosing Edit Font List allows you to add additional fonts you 
may have installed on your computer to the Font drop-down list. 


Most computers will have standard fonts like Arial and Helvetica and 
won’t have less common fonts like, say, Univers or Futura. If you use a 
nonstandard font, and it’s not on the user’s machine, the layout could 
look very different than you were planning. 


+ Style: Dreamweaver has been updated to work better with CSS styles. 
Styles defined within the document or in a linked stylesheet will be avail- 
able from the Style drop-down list. You can also use the drop-down list 
to attach a stylesheet and create and edit styles. 


+ Size: Select a font size from the Size drop-down list. The options include 
none (choosing this option displays text in the default size), specific 
numbers, generic sizes XX-small to XX-large, and relative sizes Smaller 
and Larger. If you select a number, the unit-of-measurement drop-down 
list becomes available so that you can specify what the font size number 
refers to (pixels, ems, and so on). 


+ Color: Click the color box and select a text color from the Web safe color 
palette that appears. Alternatively, you may enter a hexadecimal color 
code directly in any color code text field. (To set the default text color 
for a page, check out the “Establishing Page Properties” section, earlier 
in this chapter.) 
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+ Bold or Italic: Click the Bold button to make your selected text appear 
in bold. Click the Italic button to italicize your selected text. You can 
click either button or both. 


+ Alignment: Click an alignment button to align your text. Choices are 
Left, Center, Right, and Justify. 


+ Link: Type a URL in this field to transform selected text into a hypertext 
link. You can also use the Point to File tool to link to a file. To link toa 
file using this tool, just follow these steps: 


1. Open the Files panel by choosing Window™Files or by pressing F8. 


2. Open the Explorer to the folder location that includes the file you 
want to link to by selecting the collapsing menu squares. 


Alternatively, skip to Step 3 and hover your cursor over the folder 
that contains the file; the folder will expand so you can select the file 
within. 


3. Click and hold the Point to File button in the Text Property inspec- 
tor and drag the pointer to the file you want to link to. Release the 
mouse button when the pointer is over the file. 


The Point to File button looks like a compass without the needle or a 
clock face without hands or numbers. It’s located to the right of the 
Links field. 


When you're dragging the button, a line appears from the origin 
point to your cursor, as shown in Figure 2-5. 


After you let go of the mouse button, the link to the file appears in 
the Link text field. If you select the Link drop-down list, it shows you 
your recent links as well. 


+ Target: If you are linking the selected text, you can specify how the 
linked page will open when the user clicks the link by selecting one of 
the following options from the drop-down list: 


e _blank: Opens the link in a new window. 


e _parent: Opens the link in the parent of the window that is cur- 
rently open. If the window with the link in it is not in a frame, the 
linked page opens in the same window as the link. If the link is ina 
frame, the linked window will open in the parent frame or in the 
parent window of the frame with the link. See Book II, Chapter 4 for 
more information about frames. 


e _self: Opens the link in the currently opened window; this is the 
default target. 


e _top: Opens the link in the top-level window, replacing any existing 
frames. 





Figure 2-5: 
The line 
helps you 
see which 
file you're 
choosing. 
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+ List: Click the Unordered List button next to the Target field to transform 
text into an unordered (bulleted) list; click the Ordered List button to 
transform text into an ordered (numbered) list. 


+ Placement: Click the Text Outdent button you find next to the Ordered 
List button to outdent (decrease the indent) the selected text; click the 
Text Indent button to indent the selected text. If you outdent an item ina 
bulleted or numbered list, the item will no longer be a list item. 


Inserting a line break 

When you want to start a new line in a word-processing program, you press 
the Enter key. If you press Enter in Dreamweaver, you create a paragraph 
break, which starts a new paragraph and creates a blank space between 
paragraphs. If you want to start a new line directly under another line of text 
and without the big space between lines, you need to insert a line break. In 
Dreamweaver, you create a line break by choosing Insert™HTML™Special 
Characters™Line Break or by pressing Shift+Enter. Alternatively, you may 
click the Insert Line Break button from the HTML category of the Insert bar. 
Dreamweaver places the cursor at the start of the next line and inserts the 
line break HTML code. 
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Working with Images 


ar 


Figure 2-6: 
Select an 
image. 





Aside from entering text, manipulating images on a Web page is probably the 
most common Dreamweaver function you perform. You can add or delete an 
image and modify its properties to create an aesthetically pleasing layout 
that effectively conveys the information you want to deliver to the user. 


To see how to place an image on the background of your page, check out the 
“Establishing Page Properties” section, earlier in this chapter. 


Inserting an image 


To insert an image on a page, follow these steps: 


1. Choose Insert™Image. 


Alternatively, you can click the Insert Image button in the Common cate- 
gory of the Insert bar. 


2. In the Select Image Source dialog box that appears (shown in Fig- 
ure 2-6), click the image you want to insert. 


If the image is outside the folder that holds your HTML document, use 
the Look In drop-down list to browse to the file you want. 
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3. Click OK to insert the image. 


Note: Every image you want to include on a Web page should reside 
within the root folder of the current site (typically, you should have 
your HTML files in the site root folder — the master folder that holds 
everything on your site — and all your images in an images folder that’s 
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also in the site’s root folder). If you attempt to insert an image from 
another location, Dreamweaver asks whether you want to copy the 
image to the current site root folder. Click Yes. In the Copy File As dialog 
box, you can enter a new name for the image in the File Name text field, 
or you can accept the current name and click the Save button. 


Always be sure you have saved your HTML file at least once before you 
insert an image into it. If your file isn’t saved, Dreamweaver won’t know 
where to place the image in relation to the file. After you’ve saved the file in 
a particular folder, the location is known and Dreamweaver can include the 
correct relative location of the image. 
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Put a check in the Preview Images check box at the bottom of the Select Chapter 2 


Image Source dialog box to view a thumbnail of the image before you select 
it for insertion. The preview area also tells you the size of the image and the 
expected download time. 
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Deleting or moving an image 
To delete an image from a page, click the image in the Document window and 
press the Delete key on your keyboard. 
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If you want to move the image from one place on the page to another, you 
can click the image in the Document window, press Ctrl+X to cut the image, 
click the spot on the page where you want to move the image, and press 
Ctrl+V to paste the image. You can also move an image by clicking and drag- 
ging it to a new location. 


Modifying an image 
You can modify how an image appears on a page by editing its size and align- 
ment, adding a border, and changing other attributes. 


To modify an image, click the image in the Document window to select it. If 
the Image Property inspector does not appear, choose Window™Properties 
to open it. 
EMBER 
To see all the options the Image Property inspector offers, click the down 
arrow in the bottom-right corner of the Image Property inspector. (Clicking 
the up arrow displays fewer options.) 


You can do any of the following things to modify the way an image appears: 


+ Resize the image: Click and drag a sizing handle to change the dimen- 
sions of the image. To resize the image maintaining the same propor- 
tions, hold down the Shift key as you drag a sizing handle. You can also 
resize the image by typing new pixel dimensions in the W and H text 
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fields in the Image Property inspector. Click the Resample button to con- 
form the resized image to the new dimensions (otherwise resizing in 
Dreamweaver changes the dimensions in which the browser draws the 
image, but leaves the image file itself untouched — and image quality 
will suffer when the browser resizes the image). 


If you want the resized image to look its best, you may be better off 
resizing the image in Fireworks, because Fireworks gives you more con- 
trol over the resizing process. To edit the image in Fireworks, select the 
image and click the Fireworks button in the Edit section of the 
Properties panel. 


Align the image: In the Image Property inspector, click an alignment 
button to position the image on the page (or within a cell if the image is 
located in a table cell). Alignment button choices are Left, Center, and 
Right. To align an image with special word wrapping, select one of the 
alignment options, which are detailed in Table 2-1, from the Align drop- 
down list that appears when you position your image near a bunch of text. 


Add a border to the image: In the Image Property inspector, enter a 
number in the Border text field to add a border of that thickness to the 
image. Border thickness is measured in pixels. 


Pad an image with spaces: In the Image Property inspector, enter a 
number in pixels in the V Space (V for vertical) text field for the space 
you want to appear between the top and bottom of the image and other 
page elements; then enter a number in pixels in the H Space (H for hori- 
zontal) text field for the space you want to appear between the image 
and page elements on either side of the image. 


Make the image a link: In the Image Property inspector, enter a URL in 
the Link text field. 


Specify alternative text for the image: In the Image Property inspector, 
enter alternative text in the Alt text field. (Specifying alternative text 
ensures that when viewers’ browsers don’t — or can’t — display the 
image, some meaningful text appears instead, and also serves as an 
alternative for sight-impaired visitors to your page.) 


Name the image: In the Image Property inspector, enter a name in the 
text field next to the thumbnail image. (Naming an image is important if 
you want to refer to that image using a behavior or scripting language, 
such as JavaScript, but is otherwise unnecessary.) 


Edit the image: In the Image Property inspector, click the Edit button. 


Dreamweaver allows you to optimize, crop, resample an image, adjust its 
brightness and contrast, and sharpen it by using the buttons in the Edit 
section of the Image Property inspector. If you want the most control 
over the process of editing the image, click the Fireworks button to open 
the image in Fireworks. You'll have the choice of working directly with 
the image or opening the source file the image came from. In most cases, 
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you maintain the highest image quality by manipulating the pre-optimized 
source version of the image and then exporting it as a new GIF or JPEG. 
If you don’t see the Fireworks icon in the Edit section of the Properties 
panel when you select an image, you may have to set it (or another pro- 
gram) as your primary image editor. See Book III, Chapter 8 for instruc- 
tions on making Fireworks your primary image editor. 


+ Change the image file: In the Image Property inspector, enter a different 
filename in the Src text field (or click the File Folder button to browse for 
image files). 


+ Add an image map: In Dreamweaver, you can add multiple hyperlinked 
hotspots to images to create an image map. In the bottom left of the 
Image Property inspector, you see an arrow pointer and some image 
tools (a rectangle, circle, and free-form hotspot creator). With these 
tools, you can create hotspots on your images, and you can specify the 
following for each hotspot: 


e The link location for the hotspot 
e The target window for the link 


e The alternate text for the hotspot 






































Table 2-1 Aligning an Image in Relation to Text 
Alignment Option Effect on Image and Text Wrapping 

Default Same as Bottom alignment 

Baseline Same as Bottom alignment 

Top Aligns the image top with the highest other inline element 
Middle Aligns the image middle with the text baseline 

Bottom Aligns the image bottom with the text baseline 

Text Top Aligns the image top with the text top 

Absolute Middle Aligns the image middle with the text middle 

Absolute Bottom Aligns the image bottom with the bottom of the text descenders 
Left Aligns the image flush left 

Right Aligns the image flush right 





Working with Links 


Linking your page to other Web pages enables you to direct visitors to 
related content on the Web. To insert a link, you must specify an image or 
some text to serve as the link; you must also specify the link location to 
which you want to send your visitors. The link can go to a page within your 
site or to a page elsewhere on the Web. 
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Inserting a link 


To insert a link on a page, follow these steps: 


1. Select the text or image you want to make into a link. 


Doing so opens the Property inspector for your text or image. If the 
Property inspector does not appear, choose Window™ Properties to 
open it. 


2. In the Link area of the Property inspector, enter the destination URL 
of the link (text or image) that you created in Step 1. 


The URL you specify can be any valid URL; for example, a Web page 
within your own site (somePage.htm1), a page on the Web (http: // 
www.someSite.com/somePage.htm1), or even an e-mail address 
(mailto: somebody@somewhere.com). 


Alternatively, you may click the File Folder button you see in the 
Property inspector to display the Select File dialog box. After you 
browse your computer using the Select File dialog box and select a file, 
click OK to make that file the target of a link. 


To create an e-mail link quickly, click anywhere in your document and choose 
Insert™Email Link. Specifying the same value for the Text and E-mail fields 
that appear allows folks who haven’t configured their Web browsers to 
handle e-mail automatically to see the e-mail address on the page. Then, 
they can copy and paste the e-mail address information into their e-mail 
program of choice. 


Deleting a link 


To delete a link from text or an image without deleting the text or image 
itself, follow these steps: 
1. Select the text or image you want to remove the link from. 


The Property inspector for your text or image opens. If the Property 
inspector doesn’t appear, choose Window™Properties to open it. 


2. In the Property inspector, delete the URL from the Link text field. 


Note that if you delete a linked image or linked text from a page, the link gets 
deleted along with the text or image. 


Using named anchors 

When you want to create a navigational link that connects users not only to 
a page, but also to a specific location on the page, you need to create a 
named anchor. Named anchors are frequently used for jumping to exact 


Figure 2-7: 


The Named 
Anchor 
dialog box. 
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positions within a large block of text so that users don’t have to scroll through 
paragraph after paragraph to find the information they need. Named anchors 
are especially useful when creating links from a directory or a table of con- 
tents to the content it presents. 


Inserting a named anchor 
Place an anchor anywhere on your Web page as follows: 


1. In the Document window, click at the position you want to insert the 
named anchor. 


2. Click the Named Anchor button on the Common category of the Insert 
bar or choose Insert>Named Anchor. 


The Named Anchor dialog box appears, as shown in Figure 2-7. If the 
Insert bar is set to a different category, click and hold the category name 
and select Common from the drop-down list. 


3. Type a name in the Anchor Name text field. 
4. Click OK. 





Named Anchor ty 


Anchor name: 





It’s a good idea to insert the named anchor tag slightly above the actual posi- 
tion where you want the link to target. Doing so gives your targeted content 
a little padding on top. Otherwise, the top of your image or your first line of 
text appears flush with the top of the browser window. 


Linking to a named anchor 
To link to a named anchor, follow the procedure outlined in the “Inserting a 
link” section, earlier in this chapter, with the following modifications: 


+ Linking to a named anchor on the current page: In the Link text field 
of the Property inspector, type a pound sign (#) followed by the anchor 
name. 


+ Linking to a named anchor on a different page: In the Link text field of 
the Property inspector, type the page’s URL followed by a pound sign 
and then the anchor name. 
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ou 
e Be sure not to include any spaces in the names of anchors. These may not 


be read by the various Web browsers. 


Working with Tables 


You can position objects (such as text blocks, images, or animations) rela- 
tive to each other on a page in two basic ways: 


+ Using tables: A time-honored Web tradition for page layout, tables are 
grids of cells defined by columns and rows. Cells can have set sizes and 
alignments and may contain anything you can put on a Web page, includ- 
ing other tables. 


+ Using layers: Layers can be positioned precisely, and in Dreamweaver, 
layers are in some ways easier to use than tables. For instructions on 
how to lay out your Web page with layers, see Book II, Chapter 5. 


Adding a table to a Web page can help you lay out page elements more easily 
in the Document window. Tables consist of as many holding areas, or cells, 
as you want, and you can place virtually any Web element, such as text or an 
image, into a cell. Cells are organized horizontally into rows and vertically 
into columns. Dreamweaver provides you with complete control over the 
size, position, color, and other attributes of your table. You can edit these 
attributes at any time via the Table Property inspector. 


Inserting a table 


To insert a table into a Web page, just follow these steps: 


1. Click in the document where you want the table to go. 


2. Choose Insert™Table, use the keyboard shortcut Ctrl+Alt+T, or click 
the Table button in the Common category of the Insert bar. 


The Insert Table dialog box appears, as shown in Figure 2-8. If the Insert 
bar is set to a different category, click and hold the category name and 
select Common from the drop-down list. 


3. Enter the number of rows and columns you want the table to have in 
the corresponding Rows and Columns fields. 


You can always add or remove rows or columns later. 
4. Use the Table Width field to set a width for the table. 


The width can be either a set number of pixels or a percentage of the 
area that bounds the table (the page itself, or, if the table is nested in a 
cell, that cell). 


Figure 2-8: 
Fill out the 
Insert Table 
dialog box 
to create 

a table. 
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5. In the Border Thickness field, enter a number for how many pixels 


thick you want the border of your table to be. 


If you don’t want the table border to show (which you probably don’t if 
you're using the table for page layout purposes), enter 0 (zero). 


. In the Cell Padding field, enter a whole number for the amount of 


pixels you want between the border of the cell and the text or object 
inside the cell. 


The cell padding applies to the top, bottom, left, and right of the inside 
of each and every cell. 


. In the Cell Spacing field, enter a number for the amount of pixels you 


want between the cells. 


The cell spacing applies to the whole table; you can’t have different cell 
spacing for individual rows or columns. 


. If your table has a header row or header column (or both), click the 


button (None, Left, Top, or Both) that represents the header structure 
of your table. 


The text in a header row has special formatting that you can define in a 
stylesheet. If you’re creating a table for layout purposes, you won’t want 
a header row or column, so make sure None is selected. 


. In the Accessibility section of the Insert Table dialog box, enter a cap- 


tion and summary for the table if you need to describe the table for a 
sight-impaired audience. 


If you’re making the table for page layout purposes, leave these blank. 
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Figure 2-9: 
A simple 
table. 





10. Click OK. 


The Insert Table dialog box disappears and the empty table appears in 
your document. 


An empty table is shown in Figure 2-9. To enter data into the table, just click 
on an individual cell and enter the content you want in that cell. You can 
modify any of the table’s attributes by selecting the table and changing the 
attributes in the Properties inspector or the Tag Inspector panel. 
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Deleting a table 


To delete a table from a page, click the border of the table to select it and 
then press the Backspace or Delete key. Dreamweaver removes the table 
from your page and deletes the associated code in the HTML for the page. 
Naturally, everything that was in the table is also deleted from the page. 


Using layout tables 


The use of tables is central to the traditional way of building great Web pages 
(for information on laying out pages with layers, see Book II, Chapter 5). 
What happens, though, when you want to put an image right smack in the 
middle of a page, or when you want to have one column of information along 
the right side of the page, and a square text block at the bottom of the page? 





Figure 2-10: 
Drawing a 
layout table. 
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You can nest tables, which involves building new tables inside cells of other 
tables, but creating nested tables is complicated and not at all fun, especially 
with complex pages. 


Thankfully, Dreamweaver offers an easy way to work with complex tables 
called layout tables. With a layout table, you tell Dreamweaver where you 
want to put something on the screen, and the program generates all the 
required tablework to make it happen. 


To create a layout table, just follow these steps: 


1. Click the Layout view button in the Layout category on the Insert bar. 


If the Insert bar is set to a different category, click and hold the category 
name and select Layout from the drop-down list. 


2. Click the Layout Table button (just to the right of the Layout view 
button). 


3. Click and drag the cross hair to create the layout table of your choice. 


A light green table appears, as shown in Figure 2-10, with the dimensions 
you gave it. 


Layout Table 


Layout View | Draw Layout Cell 
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Previewing Your Work 


4. To create individual cells within that table, click the Draw Layout Cell 
button to the right of the Layout Table button and draw a cell any- 
where within the table. 


If you create a layout cell outside a layout table, Dreamweaver will 
create both the cell and the table to support it. Note that you cannot 
draw a new cell that overlaps an existing cell in the table. 


If you create a layout cell, you can immediately edit the cell you created. 
However, if you create a layout table, you either have to switch back to 
Standard view to edit the single cell of that table or create a layout cell 
within the table before you can edit the table. 


Storing information in table cells 


After you insert a table on a page, you can add or delete elements such as 
text and images in the table cells: 


+ Adding an image to a cell: To add an image to a table cell, click ina 
table cell and choose Insert™Image. Browse and select an image you 
want to add to the cell and then click OK. (For more information on 
inserting images, flip to the “Inserting an image” section, earlier in this 
chapter.) 


+ Adding text to a cell: To add text to a table cell, click to position the 
cursor in a table cell and type the text you want placed inside the cell. 


+ Deleting an image from a cell: To delete an image from a table cell, select 
the image and press Backspace or Delete. 


+ Deleting text from a cell: To delete text from a table cell, select the text 
and press Backspace or Delete. 


Previewing Vour Work 


Whether you’re working in Code view or Design view, at some point you’ll 
want to see the page as visitors to your site will see it: in a browser such as 
Internet Explorer or Netscape Navigator. If you have two or more browsers 
on your computer, you can preview your page in any of the browsers — 
without leaving Dreamweaver — by using the Preview in Browser feature. 


To preview your page in your primary browser, choose File™Preview in 
Browser™Browser Name or use the keyboard shortcut F12. The keyboard 
shortcut for previewing in your secondary browser is Shift+F12. 


Chapter 3: Creating and Using 
Dreamweaver Sites 


In This Chapter 


Defining a site in Dreamweaver 8 
Whipping up your first site 
Establishing a remote connection 
Using advanced site options 
Publishing and maintaining your site 


Using source control 


Perea 8 can be used to create many different kinds of Web 
pages. During the course of building a Web site, you'll add pages, 
graphics, links, and all sorts of related information into a single location to 
be posted eventually to a Web server on the Internet. After your site is com- 
plete, you'll probably want to make updates and fixes. Heck, you may even 
be making more than one site at the same time! 


To help facilitate management of your Web site (or sites), Dreamweaver 
offers a suite of site management tools. These tools are collectively called a 
Dreamweaver Site. This chapter explores how you can use these tools to 
manage your Web site more easily. 


Defining a Site in Dreamweaver § 


Figure 3-1 shows a typical relationship between where you build your Web 
site (your desktop) and where the site actually lives on the Internet (a Web 
server). Dreamweaver Sites facilitate getting all the correct information 
from your desktop to the Web server and generally make the Web page cre- 
ation process easier. Specifically, a Dreamweaver Site enables you to do 
the following: 


+ Move files seamlessly back and forth between your local machine and 
your Web server. 


+ Keep all your site files in a single location. 
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Figure 3-1: 
The desktop 
in relation to 
the Web 
server. 





+ Generate pages for your site based on templates that you create. 


+ Run reports on the pages in your site to check links, page load, and 
other key functions. 


+ Use source- and version-control to manage who works on what files and 
when they do it, which can prevent team members from accidentally 
overwriting each other’s work when building or maintaining a site 
collaboratively. 
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Creating Vour First Site 


If you’re working with a set of files regularly in Dreamweaver, or if you’re 
managing several sites, you’re likely to find using Dreamweaver Sites — 
which are different from a traditional Web site — an efficient way of working. 
You can create a site in Dreamweaver manually or by using a wizard, as the 
following sections describe. 


Creating a site manually 

This section shows you how to create a Dreamweaver Site manually. The fol- 
lowing steps walk you through inputting the minimum amount of information 
that you need to enter to create your site. However, you can choose from a 
number of other options, and they are covered in the “Using Advanced Site 
Options” section, later in this chapter. 


To create a basic site manually, follow these steps: 


1. Choose SiteManage Sites. 


The Manage Sites dialog box appears. You can also open the Manage 
Sites dialog box by choosing Manage Sites from the drop-down list in the 
Files panel that shows the current site. 


Figure 3-2: 
Defining 
your site. 
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2. Click the New button. 
A pop-up menu appears with the choices Site and FTP & RDS Server. 
3. Select Site. 


The Site Definition dialog box appears, opening to the Advanced tab by 
default. The Local Info options, shown in Figure 3-2, appear by default. 





Site Definition for Unnamed Site 1 ix} 
| Basic | Advanced 


Category Local Info 
Local Info 
Renee rio Site name: | Unnamed Site 1 
Cloaking z = 
Design Notes Local root folder: C;\working\Unnamed Site 11 5 
Site Layout = 
File view Coms [E] Refresh local file list automatically 
Contribute 
Defaut images folder: o 


HTTP address: | http:/} 
This address enables the Link Checker to 
detect HTTP links that refer to your own 
site. 

Cache: [¥] Enable cache 

The cache maintains file and asset 
information in the site. This speeds up the 
Asset panel, link management, and Site 
Map Features. 


|m OK | Cancel Help 


























4. Set the options for your site by filling out each of the following pieces 
of information: 


e Site Name: Choose a name that you can remember easily and that 
applies to the function of the site. 


e Local Root Folder: This is the location on your hard drive where you 
want to store the files that make up your site. Again, you should title 
the folder something intuitive and easy to remember. If you want to 
browse for a folder, just click the folder icon to the right of the text 
field. 


e Refresh Local File List Automatically: When this option is selected, 
Dreamweaver refreshes the list of files in your site every time you 
copy a file into the site. The option is selected by default. 
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e Default Images Folder: This is the standard directory for images 
used on your site. Dreamweaver adds images here when you copy 
image files into your site. A good practice is to name this folder 
images (if your site is going to be hosted on a UNIX-based server, 
you need to be consistent about using upper- and lowercase letters 
in filenames and links to those files from your site). If you want to 
browse for the directory, just click the folder icon next to the text 
field. 


e HTTP Address: This is the URL of your Web site. Dreamweaver uses 
this to verify that links in your site are working properly. 


e Enable Cache: Selecting this option speeds up Dreamweaver’s site 
management tools and is required for the Assets panel to work. See 
your documentation for information about using the Assets panel. 


5. Click OK to create the site. 


Dreamweaver creates a folder for your site if it doesn’t exist on your hard 
drive, but it doesn’t create the images directory within that folder. Thus, it’s 
always a good idea to create your folders on the hard drive first and then 
create your site. 


Creating a site using a wizard 


You may think that using a wizard to create a site is easier, which is true 

if you’re creating a complex site. However, if you’re creating a simple site 
(one that you’ll be working on by yourself and that doesn’t employ a server 
technology or testing server, for example), the manual route is the simpler 
way to go. 


To use the wizard, follow these steps: 


1. Choose SiteManage Sites. 

The Manage Sites dialog box appears. 
2. Click the New button. 

A pop-up menu appears with the choices Site and FTP & RDS Server. 
3. Select Site. 


The Site Definition dialog box appears, opening to the Advanced tab 
by default. (It just so happens that the Advanced tab has all the stuff 
for defining your site manually, whereas the Basic tab holds the Site 

Definition Wizard.) 


4. Click the Basic tab to access the wizard, as shown in Figure 3-3. 


Figure 3-3: 
Step one of 
the wizard. 
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Site Definition for Unnamed Site 1 t 
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Site Definition 


Editing Files 


A ste, in Macromedia Dreamweaver MX 2004, Is a collection of files and folders that corresponds 
to a website on a server, 


‘What would you Ike to name your site? 


Unnamed Site 1| 
Example: mySite 


TF you want to work directly on the server using FTP or RDS, you should create an FIP or RDS 
server connection instead. Server connections do not alow you to perform sitewide 
lke link checking or site reports, 





Next > IE Cancel a Help 

















5. Enter a name for your site in the appropriate text field and then click 
Next. 


The Editing Files, Part 2 page of the wizard appears. 


6. If your site is going to be dynamic, choose a server technology to 
process Web pages before they’re sent to the user and then click Next. 


Select a technology by selecting the Yes radio button and selecting your 
Web serving technology from the drop-down list. Dreamweaver provides 
you with several server options, including several flavors of ASP, plus 
JSP, PHP, and (of course) ColdFusion. If you’re not using a server tech- 
nology, select the No radio button. 


7. In the new page that appears, choose how you want to edit your files 
and then click Next. 


If you have selected a server technology to use on the Editing Files, 

Part 2 page, then on the Editing Files, Part 3 page you get the Dynamic 
options shown in Table 3-1; if you’re not using a server technology, you 
get the Static options. Click the radio button next to the option you want 
to choose. 
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Table 3-1 Site Editing Options 

Dynamic Static 
Option Description Option Option 
Edit and Test Locally Allows you to edit your files and test Yes No 


them locally using ColdFusion (or 
other technology) as your Web server. 





Edit Locally, Then Upload In this mode, you edit the files on your Yes Yes 
to Remote Testing Server computer and then manually upload 

(Edit Local Copies on Your them using Dreamweaver's FTP tools 

Machine, Then Uploadto to move the files to a remote server. 

Server When Ready) 





Edit Directly on (Remote This option allows you to edit files Yes Yes 
Testing) Server Using directly on a volume on your internal 
Local Network network. 


8. In the new page that appears, configure your testing environment and 
then click Next. 


Based on the editing and testing methodology you chose in Step 7, you 
are asked to configure your testing environment. Here are the various 
options: 


e Edit and Test Locally: For this method, you are asked to provide the 
local URL for testing. Usually, this is http://localhost/ folder, 
where folder is the name of the root folder of your site. 


In order to ensure that this method works properly, always make 
sure that you create your site within the directory for http: // 
localhost on your hard drive. For most Windows 2000 or XP 
computers, this location is C: \inetpub\wwwroot \ by default. 


e Edit Locally, Then Upload to Remote Testing Server: If you select 
this route, click Next to see a page where you can select a method 
of connecting to the remote location for your site. Your options are 
Local/Network, FTP, RDS (Remote Development Services, used in 
conjunction with ColdFusion), and the always popular, “I’ll set this 
up later.” Figure 3-4 shows the Local/Network option. 


e Edit Directly on (Remote Testing) Server Using Local Network: If 
you’ve chosen this option, then you are asked for the URL of the 
remote server, as shown in Figure 3-5, so that Dreamweaver knows 
where to look to test your site. If you want to edit directly on the 
remote testing server using FTP or RDS, click the Create an FTP or 
RDS Server Connection text link on the first page of the wizard. 





Figure 3-4: 
Connecting 
using your 
local 
network. 








Figure 3-5: 
FTP require- 
ments for 
editing 
remotely. 
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9. 


10. 


In the new page that appears, configure your file sharing options and 
click Next. 


Dreamweaver includes options for source control, which you can use to 
prevent team members from overwriting each others’ work when col- 
laborating. You can choose to enable it here by selecting the Yes radio 
button. File sharing is discussed in more detail in the “Using Source 
Control” section, later in this chapter. 


Review your settings and click Done to set up your site. 


The Site Definition dialog box closes. Click Done to close the Manage 
Sites dialog box. 


Setting Up a Remote Connection 


After you create your site, either by using the wizard or by setting it up man- 
ually, it’s a good idea to get connected to the place where the remote version 
of your site (the one users will access via the World Wide Web) will live. 
Dreamweaver can connect to a remote server in a variety of ways. The route 
you choose depends largely on how you plan to build and maintain your 
site. You have essentially three different scenarios: 


+ 


Creating and testing your site solely on your own computer: For exam- 
ple, this may be the case if you’re building your site for someone else, 
say a client. Here the remote server is your computer — not all that 
remote! 


Creating your site on your computer, but testing it somewhere else: 
This is the most common situation. Dreamweaver has three different 
delivery options for this scenario: FTP, Remote Development Services 
(RDS), and local network connection. 


Creating and testing your site on a remote machine: In this case, the 
options are the same as in the previous bullet. The only difference is 
that when you're editing, you’re editing files directly on the remote loca- 
tion, leaving nothing on your local machine. 


In most cases, your remote location is at an externally hosted Internet service 
provider (ISP). If you’ve got an account set up with an ISP, make sure to get the 
following information, which is required for Dreamweaver to set up a connec- 
tion to your remote Web server: 


+ An IP address or a URL to be used when posting your files 


+ A folder on the remote server where you are supposed to keep your site 


files 


Figure 3-6: 
The Manage 
Sites dialog 
box. 
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+ A username for your account 


+ A password for your account 
To set up a remote connection, follow these steps: 


1. Choose Site>Manage Sites to bring up the Manage Sites dialog box, 
shown in Figure 3-6. 
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2. Select your site from the list on the left and then click the Edit button. 
The Site Definition dialog box appears, opening to the Advanced tab. 
3. From the Category list on the left, select Remote Info. 


Along the right side of the dialog box, the Local Info options are replaced 
with the Remote Info options. If you haven’t set up a connection previ- 
ously, all you see is the Access drop-down list. 


4. Select an option from the Access drop-down list. 
You can choose from several Access options in this list, including 
e FTP: The industry standard, file transfer protocol. 


e Local/Network: A location on your local (meaning office, home 
office, or your own computer) network. 


e RDS: ColdFusion’s Remote Development Services allows secure 
remote access to files within a ColdFusion application server. 


e SourceSafe Database: SourceSafe is Microsoft’s version control 
application, which helps prevent the accidental overwriting of files 
when you’re collaborating with others to build the site. With 
Dreamweaver, you can integrate SourceSafe and use it for your 
version control. 


e WebDAV: This stands for Web-based Distributed Authoring and 
Versioning. Like SourceSafe, it’s a standard for version control and is 
used with Web servers like Apache Web Server and Microsoft IIS. 
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Figure 3-7: 
Setting your 
Firewall 
preferences. 





5. Fill out the appropriate information for the connection type you 
selected. 


Leave the source control settings alone for the moment, which are 
described in the “Using Source Control” section, later in this chapter. The 
following list describes the information needed for each connection type: 


FTP: In addition to the four items we note at the beginning of this 
section (host, folder, username, and password), you also need to 
select the Passive FTP check box if you plan to use Passive FTP 
(required for some servers). If there’s a firewall you need to work 
through, you can click the Firewall Settings button to set the Firewall 
preferences in the dialog box that appears, as shown in Figure 3-7. 
Select the Use Secure FTP (SFTP) check box if you want to use 
encrypted secure logins (again, not likely). After you’ve added the 
necessary settings, you’re able to connect to your ISP. 
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If you select Automatically Upload Files to Server on Save, 
Dreamweaver will automatically make a connection to the remote 
server and upload your file each time you save it. 


Select the Enable File Check In and Check Out option if you’re work- 
ing in a collaborative environment and you want to ensure that other 
team members can’t work on a file at the same time you’re working 
on it. If you select this option, you need to add information that will 
identify you to your collaborators. 


Local/Network: Here you only need to specify the location of the 
remote folder on the network or a local drive, which you can enter 
manually or by clicking the folder icon to browse the network for the 


Figure 3-8: 


The 
Configure 
RDS Server 
dialog box. 
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folder location. You can also select the Refresh check box if you’d 
like the list of files on your site to be automatically refreshed when a 
new file is added. 


e RDS: If you select RDS from the drop-down list, you need to click the 
Settings button next to the list to configure the RDS connection, as 
shown in Figure 3-8. To configure RDS, you need a host name (IP 
address or URL), port number (the default is 80), the directory of the 
site on the host, a username, and a password. If you don’t want the 
password saved, then deselect the Save check box. 





Configure RDS Server ty 
Host name: | Test Site 
Port: |30 
Full Host Directory: 9 >: \instpub\wwivroot\, 
Usemame: acowitt 
Passwort seeceeee MSave 
OK Cancel | 
J 








e SourceSafe: As with RDS, with SourceSafe you have to click the 
Settings button next to the drop-down list. Then you specify the loca- 
tion of the SourceSafe Database Path (a path to an .ini file, usually 
on a network volume), the name of the project, a username, and a 
password. If you don’t want the password saved, deselect the Save 
check box. 


e WebDAV: With WebDAV, you must also click the Settings button next 
to the drop-down list to configure the connection. You need the URL 
of the connection, a username, a password, and an e-mail address. If 
you don’t want the password saved, deselect the Save check box. 


6. Click OK to put the changes into effect. 


Using Advanced Site Options 


If you used the wizard to create your site, you may have been struck by the 
array of questions asked. That’s because you can configure a number of 
advanced settings with Dreamweaver. Most of them you're not likely to need, 
but just in case, we describe them in the following sections. You can access 
all these options by selecting the name of the item in the Category list of the 
Site Definition dialog box (refer to Figure 3-2). 
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Figure 3-9: 
Choosing 
a testing 
server. 


Testing your server 


Select Testing Server from the Category list on the Advanced tab of the Site 
Definition dialog box to access the options for setting up your testing server. 
If you’re building a dynamic site, you need to have a Web server running that 
can process the pages and render them as HTML. (For more on how this is 
accomplished, see Book VII, Chapter 3.) To specify a Web serving technol- 
ogy, do the following: 


1. Select a Web server from the Server Model drop-down list, as shown 
in Figure 3-9. 


You have several options here; if you’re working within the Macromedia 
model, your selection is probably going to be ColdFusion. 





Site Definition for Demosite 
f 
| Basic Advanced | 
Category Testing Server 
Local Info 
Remote Info 
Testing Server Server model; (ColdFusion ¥ 
Cloaking 
Design Notes Access: RDS {v 
Site Map Layout 


File Yiew Cohimns 
Contribute 


URL prefix: httprfflecathost/ 


The URL Prefix is the location of the ste's 
root folder on the testing server 








ma OK [ Cancel z Help | 

















2. Select an Access type. 


You can choose FTP or Local/Network. If you chose RDS on the Remote 
Info screen, you see an RDS option here as well. Choosing any of them 
provides additional fields for you to fill out, as specified for each Access 
type in the “Setting Up a Remote Connection” section, earlier in this 
chapter. Choose None if you don’t want to use a testing server. 


3. Click OK to save your settings. 
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Cloaking 

Cloaking is a handy and appropriately named feature in Dreamweaver Sites. 
When enabled, cloaking allows you to hide different file types or folders from 
Dreamweaver’s site tools. This can be especially helpful if you keep your raw 
asset files (your source Fireworks PNGs, Flash FLAs, and so on) in the same 
directory as the site itself, but you don’t want the files uploaded or down- 
loaded, included in reports, or otherwise touched by various Dreamweaver 
operations. To engage this feature, click the Advanced tab of the Site 
Definition dialog box and select Cloaking from the Category list on the left. 
Then select the Enable Cloaking and Cloak Files Ending With check boxes 
and add the file extensions for the file types you want to mask. See the 
online Help files for more details. 


Using Design Notes 

Design Notes aren’t really necessary unless you’re collaborating on a site 
with other people. In that case, Design Notes can be especially helpful. For 
example, you can use Design Notes to let others know the status of a given 
file. To engage Design Notes, click the Advanced tab of the Site Definition 
dialog box, select Design Notes from the Category list on the left, and then 
simply select the Maintain Design Notes check box. If you want to move the 
notes to the server when the site is published so that other team members 
can access them, select the Upload Design Notes for Sharing check box. 


Setting up a site map 

If you select Site Map Layout in the Category list in the Site Definition dialog 
box, you can set up the specifics of how you'd like your site’s site map to 
look. You can specify the following: 


+ The home page for the site map, which can be different from the home 
page (index.htm) of the site 

+ The number and width of the columns of the map 

+ The labels for the site map icons 

+ Whether or not to display items marked hidden 

+ Whether or not to display dependent files 


Selecting columns for the File view 

For the File view, shown in Figure 3-10, you have six built-in columns to choose 
from: Name, Notes, Size, Type, Modified, and Checked Out By. However, you 
can also add and remove your own columns by clicking the (+) and (-) but- 
tons, respectively. For a column you create, you can also specify the following: 
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Figure 3-10: 
The File 
view. 
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The column name 


The column’s Design Note association, if its contents relate to a specific 
Design Note 


The text alignment for the column 


The option to show or not show the column in the File view (Vote: The 
Name column cannot be hidden or moved.) 


Whether or not to share the column so other workers on the site can 
see it (Vote: You must have Maintain Design Notes selected to share a 
column.) 


Enabling Contribute compatibility 


To enable compatibility with Contribute, click the Advanced tab of the Site 
Definition dialog box and select Contribute from the Category list on the left. 
Select the Enable Contribute Compatibility check box if you plan to have 
people maintain your site using Contribute. Selecting this option allows you 
to perform many administrative functions related to Contribute (for exam- 
ple, you can send Connection Keys based on your Dreamweaver Site setups). 
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Publishing Vour Site 





Figure 3-11: 
Remote and 
local sites. 





After you’ve set up a remote site in a Dreamweaver Site, publishing your site 
is a snap. To publish your site to a remote server, just follow these steps: 


1. If the Files panel isn’t already open, open it by choosing Window 
Files or by pressing F8. 


2. On the File tab, click the Expand/Collapse button (the button on the 
far right of the toolbar) to switch to File view mode. 


This brings up the File view shown in Figure 3-11. 
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3. If you haven’t connected to the remote server since you launched 
Dreamweaver most recently, click the Connection button at the left 
of the Files panel toolbar to establish a connection with the remote 
server. 


4. Select a file and click the Put button on the toolbar (an upward point- 
ing blue arrow) to copy a file from the local server to the remote 
server, or click the Get button (a downward pointing green arrow) to 
copy a file from the remote server to the local server. 
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If you’re copying files for the first time, simply select the site’s root 
folder and click the Put button. To copy files from the Local to Remote 
servers, or vice versa, you can also simply click and drag the elements 
from local to remote, or vice versa. If you use this method, be careful to 
place files in the correct folders. 


ay? If you ever want to see what’s going on behind the scenes when you’re copy- 
ing those files, just click the FTP button in the toolbar in File view. The 
Results panel appears/expands and shows you the remote connections 
being set and all the commands for the files being sent (the File view col- 
lapses back to the Files panel as well). 


Maintaining Vour Site 


After your site is built, you want to make sure that it continues running at 
peak efficiency. To help in this effort, Dreamweaver offers some valuable 
tools that can help you keep on top of the wide array of items that go into 
keeping your site running smoothly. We describe the two basic types of 
tools, reports and link checkers, in detail in the following sections. 


Running reports 


Reports encapsulate information about various aspects of your site at the 
time the reports are run, giving you a snapshot of information such as which 
files on your site are currently being worked on by different team members, 
whether all the images on a selected page have Alt tags, and more. To runa 
report in Dreamweaver, just follow these steps: 


1. Choose Site™Reports. 


The Reports dialog box appears, as shown in Figure 3-12. 
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2. Choose what you want to run the report against. 


You can choose to run a report on the currently selected document, the 
entire site, selected files in the site, or a folder within the site. Select one 
of these options from the Report On drop-down list. 


3. Select the reports you want to run by selecting the check box next to 
their names. 


You can run nine possible reports, across two categories: 


e Checked Out By: This report tells you what files in source control 
are currently being used by different members of the team. If you 
want the report to show only which files are currently checked out 


by a particular team member, click the Report Settings button at the ane 
bottom of the dialog box while the report is selected and add an indi- 
vidual’s name to the text field in the Checked Out By dialog box that Do 
pops up. gs 
e Design Notes: This report prints out all the Design Notes associated z & 
with files on the site. To filter your results via the Design Notes 25 
dialog box, shown in Figure 3-13, click the Report Settings button 3 = 
while the Design Notes report is selected. = 2. 
ae 
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Category - Rule Enabled lKa 
AL, r on | Cancel | 
(4) S08_accessibiity ALL 
E W3C/WAI_accessbilty ALL | Sab. | 
E images ALL 
E manual ALL 
E Forms ALL 
E Frames ALL 
E tables ALL 
E imagemaps ALL 
(+) scripts ALL 
Æ suggestions ALL 

— 

Figure 3-13: (Enbe) (Disable) 

. : G " . 

Filtering L Show "PASSED" tests, 
Select the rules to be run. Notice: the same rule may belong to more than one 

results. category, 

sl 








e Recently Modified: This report shows which files have been modi- 
fied within parameters you set by clicking the Report Settings button 
and specifying in the Recently Modified dialog box. 


e Combinable Nested Font Tags: This report details locations in the 
code where overlapping Font tags could be merged. For example, if 
you change the size of a block of text, your code might contain some- 
thing like this: 
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Figure 3-14: 
The Results 
panel. 


<FONT face="Arial"><FONT size="2">Some text.</FONT> 
</FONT> 


When it could and should be 
<FONT face="Arial" size="2">Some text.</FONT> 


Accessibility: If you run this report, the site files are scanned to find 
places where the code is not ADA (Americans with Disabilities Act) 
compliant. For more information about accessibility, browse to 

the W3C Web Accessibility Initiative pages at www.w3 .org/WAI/ 
Resources/. 


Missing Alt Text: This report looks for images to make sure they 
have Alt text, which is both best practice and important for accessi- 
bility (see the section on modifying an image in Book II, Chapter 2 for 
a little info on Alt text). 


Redundant Nested Tags: This report searches the code for locations 
where extra tags can be eliminated. 


Removable Empty Tags: If you’re working in Design mode and moving 
lots of things around, sometimes the underlying code can be left with 
lingering, empty tags. This tool finds those empty tags. 


Untitled Documents: This report searches for pages that may have a 
filename but don’t have a title. 


4. Click Run to run the reports. 


The results appear in the Site Reports tab of the Results panel, as shown 
in Figure 3-14. 
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Checking links 


In addit 


ion to the reports that help clean up your code, Dreamweaver can 


also check the links on your site. To run the Link Check report, choose Site™ 
Check Links Sitewide or press Shift+F8. You see the results in the Link Checker 
tab in the Results panel. The report shows broken links, external links, and 
orphaned files. 
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Using Source Control 


Source control allows team members to check out a document in your site, 
thereby locking it and making it uneditable by others until the team member 
who checked it out checks it back in again. This process is intended to ensure 
that files don’t get overwritten accidentally and that data doesn’t get lost 
during the development process. 


WING, 
s 


In most large-scale software development projects, where multitudes of people 
work on a single code-base, source control is critical. If your site requires that 
more than three people work on the same pages and code, you should con- 
sider taking advantage of this feature in Dreamweaver. 


To set up source control, do the following: 


1. 


4. 


Choose Site™Manage Sites, select your site, and then click the Edit 
button to open the Site Definition dialog box. 


. Click the Advanced tab if it’s not already open and select Remote Info 


from the Category list on the left. 


. Set your source control options at the bottom of the screen. 


When you enable file check in and check out, the following options 
become available: 


e Check out files automatically when you open a document within the 
site. 


e Provide your name and e-mail address for site reporting and informa- 
tional purposes. 


You must have selected an Access option on the Remote Info screen 
before you can get the Check In/Check Out options to show up at the 
bottom of the page. See the “Setting Up a Remote Connection” section, 
earlier in this chapter, for more information about Access options. 


Click OK to save your settings. 


To work with a file after you’ve enabled source control, right-click the file 
from the Files panel and select one of the following options: 


+ 
+ 


+ 


Get: Retrieves the most recent version of the file and copies it locally. 


Check Out: Makes your local version the only editable version of a docu- 
ment and ensures that others can’t open and save the file. 


Put: Copies the local version of your file to the remote location. 


Check In: Puts your local version of the file on the server and unlocks it 
so that others can check it out and work on it if necessary. 
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Chapter 4: Punching Up Vour 
Pages with Forms and Frames 


In This Chapter 


Incorporating forms into your Web pages 


Structuring your pages with frames 


] wo Web page features, forms and frames, are also two of the most 
advanced features. You use them in your Web pages to serve the follow- 
ing functions: 


+ Forms: Enable you to gather information and feedback from the users 
who visit your Web pages. Forms can consist of text fields, buttons, 
check boxes, radio buttons, and drop-down lists, all of which enable the 
user to enter information or to choose among options you present. 


+ Frames: Enable you to construct sophisticated navigational schemes 
for your Web site. Frames are actually separate Web pages that are parti- 
tioned off so that two or more can be displayed in the same browser 
window at the same time. For example, one frame may be a navigational 
page consisting of a list of links to other pages; that frame remains in 
place in its portion of the browser window even when the user clicks a 
link to display a different Web page in the other frame. 


In this chapter, you see how to work with these powerful features in 
Dreamweaver 8. 


Incorporating Forms into Web Pages 


Forms on the Web serve the same purpose as the paper-based forms you 
fill out — they provide a structured format for gathering specific informa- 
tion. The difference is that Web-based forms usually require less time for 
keyboard-savvy users to fill out. 


Dreamweaver offers you a number of handy tools for creating Web-based 
forms that you can easily include on your Web pages. You can incorporate 
everything from text fields to radio buttons, and create surveys, gather user 
data, and conduct e-commerce. 
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Figure 4-1: 
The dashed 
lines mean 
you've 
created 

a form! 





Creating Web-based forms requires two steps: 


1. Creating the form that users see and interact with, which we demon- 
strate how to do using Dreamweaver in this chapter. 


2. Creating the processing program that accepts and processes form 
input, which we cover in more detail in Book VII, Chapter 4. 


Adding a form 


Before you can insert specific form objects such as check boxes on your Web 
page, you must first add a form to the page so that the appropriate code is 
added to the HTML. 


To add a form to a page, click in the Document window where you want to 
add the form and choose Insert™Form™Form, or click the Form button from 
the Forms category on the Insert bar. (If the Insert bar is set to a different 
category, click and hold the category name and select Common from the 
drop-down list.) 


Dreamweaver adds the form to the page as indicated by the red dashed 
lines, and also adds the associated form tag to your HTML page code, as 
shown in Figure 4-1. You can now insert form objects inside the red dashed 
lines of the form. 
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If you attempt to add a form object without first adding a form, a dialog box 
appears, asking whether you want to add a form tag. Click Yes to add both 
the form tag and the object to your page. 


Specifying form properties 

A form has six properties that you can set using the Form Property inspec- 
tor: Form Name, Action, Method, Enctype, Target, and Class. Click the form 
to open the Form Property inspector. (If the Property inspector does not 
appear, open it by choosing Window™Properties.) Then specify the follow- 
ing properties: 


+ Form Name: Enter an alphanumeric name in the empty text field (the 
name should start with a letter, but it can be made up of both letters 
and numbers). The advantage of naming your form is that you can use 
the name to reference the form in a scripting language that you use to 
retrieve, store, and manipulate the form data. 


+ Action: Enter the URL of the application document/file that processes 
the form data. Alternatively, you can browse to the location by clicking 
the folder and making a selection in the Select File dialog box. 


You can select the following three common actions: 


e Enter the URL of a ColdFusion page that evaluates the form after it’s 
been submitted. 


e Enter the JavaScript program that runs after the user submits the 
form. The action appears as follows: 


javascript: function() 
Here, function refers to the name of your form-handling function. 


e Enter amailto: address where the form data goes after the user 
clicks the Submit button. Amailto: address appears similar to the 
following: 


mailto:worker@formhandling.com 


+ Method: Select a method from the drop-down list for how the form data 
passes to the processing entity that you specified in the Action field. 
Choices are Default, GET, and POST. (Default and GET are the same.) GET 
sends the form data by appending it to the URL that the Action specifies. 
POST sends the form data as a separate entity. GET limits the amount of 
data that can pass along, but POST does not. 


In other words, if you were to choose GET, the URL sent to the server 
might look something like http: //www. server .com/coldfusionpage 
.cim&bowlingballcolor=blue, with the form data stuck onto the 
end. If you were to choose POST instead, the URL would just look some- 
thing like http://www. server .com/coldfusionpage.cfm. 
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Most of the time, whether you choose GET or POST doesn’t really make 
a difference. However, there are times when you may want to choose 
one over the other. For example, for security purposes, you may not 
want information, such as a credit card number, ever being shown ina 
browser’s history. And if the user might choose to bookmark the URL, 
whether or not to have all of the form data appear could affect your 
decision. If the form data included secure user information (such as the 
credit card example), then you probably wouldn’t want to have the form 
data appear. However, if the form data includes search criteria, the user 
might want to bookmark the URL complete with the search parameters. 


Data received at the specified mailto: address is not formatted for 
easy reading: It appears as strings of code with the form data embedded 
within it. This may depend on the encoding option, which we are about 
to discuss. 


+ Enctype: This is an optional attribute. For enctype, your choices are 
application/x-www-form-urlencoded (the default), and multipart/ 
form-data. application/x-www-form-urlencoded replaces all blank 
characters in the text with a plus sign (+), and it replaces other nonprint- 
ing characters with symbols and numbers. This is often necessary for 
the server to interpret the information it is receiving — for example, 
when you’ve used the GET method, the browser would not be able to 
process a URL with blank spaces in it. Multipart/form-data does not do 
this conversion, but instead transfers the information as a compound 
MIME document. Multipart/form-data is the method that must be used if 
you are using an <INPUT TYPE="file"> element in the form. Instead 
of either of these two options, you can type in text/plain, which will also 
send the data unencoded; however, this is not a W3C standard. 


+ Target: This is also an optional attribute. If you do not specify a target, 
the server will assume that you want any information that is sent back 
to the browser (the URL of the response page, for example) sent to the 
same window or frame that your original form is in. If you wish the form 
submission’s results to appear in a different frame or window, you must 
specify the name of the target window in this attribute. 


+ Class: You can apply a CSS (Cascading Style Sheet) class to the form as 
a whole and to some form elements in order to control how those form 
elements appear in a browser. For example, you can specify the color of 
a text field by assigning it a style. This attribute is also optional. For 
details on using CSS style sheets, take a look at CSS Web Design For 
Dummies, by Richard Mansfield (published by Wiley Publishing, Inc.). 


Labeling form objects 


Dreamweaver enables you to provide descriptors for form objects and provide 
the user with directions about how to complete the information requested for 
each option. To add descriptors to form objects, simply position your cursor 
in the form and begin typing. Then insert the form object you want. 


Incorporating Forms into Web Pages 99 


Using text fields 

Text fields are blank text boxes that you can insert in your form to hold 
alphanumeric information that the user types. You can set up a text field to 
hold a single line of text, multiple lines of text, or a password, as follows: 


+ Single line: Provides space for the user to enter a single word or short 
phrase of text. 


+ Multi line: Provides space for the user to enter a longer string of text. 
Appropriate for a comment box. 


+ Password: Provides space for the user to enter a password. An asterisk 
or other placeholder appears in the text field for each character that the 
user types to hide the password characters from anyone who might be 
looking over the user’s shoulder. 


To add a text field, follow these steps: 


1. In the Document window, click where you want to add the text field 
and choose Insert>Form™Text Field, or click the Insert Text Field 
button on the Form category of the Insert bar. 


If the Insert bar is set to a different category, click and hold the category 
name and select Form from the drop-down list. 


Dreamweaver adds a text field to your form and a Text Field Property 
inspector appears. If the Text Field Property inspector does not appear, 
choose Window™Properties to open the inspector. 


2. Fill in the following fields of the Text Field Property inspector to 
define the parameters of the text field: 


TextField name: Enter a name in the empty field. The field is refer- 
enced by this name in the HTML page code. 


Char Width: Enter a whole number for the approximate visible width 
of the field. (The width is approximate because text characters 

in your form are displayed differently according to users’ browser 
settings.) 

Max Chars: (Applies to Single line and Password fields only) Enter 

a whole number to indicate the maximum number of characters that 
the user can enter in the field. Max Chars can be different from Char 
Width. 


Num Lines: (Applies to Multi-line fields only) This specifies the height, 
in lines, of the form element, and may be affected by the setting for 
Wrap. 


Type: Select a radio button for Single line, Multi-line, or Password. 
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e Init Val: (Optional) Enter an alphanumeric word or phrase that occu- 
pies the text field when the user first encounters the field. Users can 
enter their own information over the Init Val. If you leave this attrib- 
ute blank, the user will see a standard empty text field. 


e Wrap: (Applies to Multi-line fields only) Select an option for text 
wrapping from the drop-down list. Options consist of Default, Off, 
Virtual, or Physical. Default and Off are the same and do not wrap 
text until the user presses the Enter key. The Virtual option wraps 
text on the user’s screen but not when the form is submitted. The 
Physical option wraps text both on the user’s screen and when the 
form is submitted. 


e Class: (Optional) You may assign a CSS class to a text field to affect 
the appearance of the field or the text within it. For details on using 
CSS style sheets, look up CSS Web Design For Dummies, by Richard 
Mansfield (published by Wiley Publishing, Inc.). 


Setting up buttons 


After a user enters data into a form, the user must then perform some sort of 
task to transmit the data from his or her computer to another computer that 
can process the information. Dreamweaver offers you three buttons you can 
use to activate your form: Submit Form, Reset Form, and None: 


+ Submit Form: After the user clicks this button, the form data scoots off 
to another computer based on the specified action. (You see how to set 
the action of a form in the “Specifying form properties” section, earlier in 
this chapter.) 


+ Reset Form: After the user clicks this button, it erases all data entered 
into the form, resetting each form field to its initial value. 


+ None: After the user clicks this button, it executes the programming 
function that the Web designer assigned to it (for example, performs a 
mathematical calculation or sends the user to a different URL). 


Follow these steps to insert a button into your form: 


1. Click where you want to add the button in the Document window and 
choose Insert™Form™Button or click Insert Button on the Form cate- 
gory of the Insert bar. 


If the Insert bar is set to a different category, click and hold the category 
name and select Form from the drop-down list. 


Dreamweaver adds a button to your form and the Button Property 
inspector becomes visible. If the Button Property inspector does not 
appear, choose Window™Properties to open the inspector. 
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2. Fill in the following fields of the Button Property inspector to define 
the parameters of the button: 


e Button Name: Enter a name in the empty text field. This name identi- 
fies the button in the HTML code. 


e Label: Enter the text that you want to appear on the button. 


e Action: Select a radio button to indicate the function of the button. 
Choices consist of Submit Form, Reset Form, and None. 


e Class: (Optional) You can assign a CSS style to affect the button’s 
appearance (color, width, and the like). 


You can create a graphical Submit button — a button created from a small 
image — by choosing Insert™Form™Image Field or by clicking the Image 
Field button in the Form category of the Insert bar. Then browse to the 
image file in your site or type the path to and name of the image file directly 
into the File Name field. 


Adding other form elements 

In addition to the text fields and buttons, you can add a variety of form ele- 
ments that help your users give you information. Figure 4-2 shows some of 
the useful form elements you can add to your forms. To insert any of the ele- 
ments you see in Figure 4-2, follow these steps: 


1. Position your cursor in the area of the Document window where you 
want to add the element. 


2. Click the appropriate button in the Form category of the Insert bar 
(see Figure 4-2) or choose Insert™Form Objects™Desired Form 











Element. 
Image Field File Field 

— Jump Menu Label 
Figure 4-2: | 
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Create Form ListMenu Button Field Set 

Text Field Radio Group 


Hidden Field Radio Button 
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If the Insert bar is set to a different category, click and hold the category 
name and select Form from the drop-down list. 


Dreamweaver adds the element to your form and the appropriate 
inspector appears. (If the appropriate inspector does not appear, open 
it by choosing Windows™Properties. ) 


3. Fill in the fields of the inspector. 


If you’re adding a radio button group, jump menu, or image, a dialog box 
will pop up and ask you for additional information. Fill in your choices 
for each of these. 


4. Click OK to apply your selections and close the dialog box. 


Structuring Pages with Frames 


<r 


Frames are divisions of a Web page that enable you to load information inde- 
pendently into distinct regions of the browser window. Frames are useful if 
you want to display certain information onscreen while changing other infor- 
mation. You frequently see three-frame pages on the Web — the top frame 
shows the site’s title graphic, the left frame shows the navigation bar, and 
the large body frame changes to show the content that you select. 


A special HTML page called a frameset defines the structure and formatting of 
frames on your Web page. As you work with frames, be aware that you must 
always save the frameset page to lay out the size, position, and borders of 
your frames, along with the content that you want to display in each frame. 
Keep in mind that different browsers may draw the frames slightly differently, 
even if you specify exact pixel dimensions. 


Adding frames 

You can add a frame to a frameless Document window or to an existing 
frame within the Document window. Adding a frame to an existing frame 
divides that frame into two or more regions. 


To add a frame, click the Document window or existing frame in the area 
where you want to add the frame. Then click the Frames button in the Form 
category of the Insert bar and choose from the list of options that pops up. 
You can also get to an equivalent list (the same options, some with slightly 
different names and no icons) by choosing Insert™HTML™Frames™Frame 
Option, where Frame Option is one of the choices detailed in Table 4-1. 
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Table 4-1 Options for Creating Frames 
Frame Option What It Does 

Left Creates a vertical frame down the left side 
Right Creates a vertical frame down the right side 
Top Creates a horizontal frame across the top 
Bottom Creates a horizontal frame across the bottom 





Bottom and Nested Left 


Splits the page in two — top and bottom — and creates a left 
frame in the top frame 





Bottom and Nested Right 


Splits the page in two — top and bottom — and creates a right 
frame in the top frame 





Left and Nested Bottom 


Splits the page in two — right and left — and creates a bottom 
frame in the right frame 





Right and Nested Bottom 


Splits the page in two — right and left — and creates a bottom 
frame in the left frame 





Top and Bottom 
Left and Nested Top 


Right and Nested Top 
Top and Nested Left 


Top and Nested Right 


Creates three frames 


Splits the page in two — right and left — and creates a top 
frame in the right frame 


Splits the page in two — right and left — and creates a top 
frame in the left frame 


Splits the page in two — top and bottom — and creates a left 
frame in the bottom frame 


Splits the page in two — top and bottom — and creates a right 
frame in the bottom frame 


A third method of adding a frame is to drag the outer border of the current 
frame or Alt+click in the inner border. You can then follow the steps in the 
next section to modify this new frame. 


Modifying frames 


You use the Frame Property inspector to select the source page that appears 


in a frame. You also use the Frame Property inspector to format the appear- 
ance of an individual frame. To modify a frame, follow these steps: 


1. If the Properties panel is not already open, open it by choosing 
Window~Properties or by using the keyboard shortcut Ctrl+F3. 


2. In the Frames panel, Alt+click the frame that you want to modify the 


attributes of. 


Note: You can’t simply click a frame to open its associated Frame Property 
inspector. If you click a frame, you’re actually clicking the source page that 
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Figure 4-3: 
Alt+click 
a frame to 
select it 
and see 
the Frame 
Property 
inspector. 





resides in the frame — a process identical to clicking in the Document 
window for that page. To select a specific frame, press the Alt key and 
click in the frame. You see the Frame Property inspector for an individual 
frame and the selected frame marked with a dashed line, as shown in 
Figure 4-3. 
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A Frame Property inspector appears for the selected frame. If the inspec- 
tor doesn’t appear, open it by choosing Window™Properties. 


In the Frame Property inspector or the Attributes tab of the Tag 
Inspector panel, enter a name for your frame in the Frame Name text 
field. 


This name is the name by which the frame is referenced in the Frames 
panel, target drop-down lists, and the HTML page code. 


The frame name must start with a letter and you should not use hyphens, 
spaces, or periods. You should also avoid using JavaScript-reserved 
names, such as top. Although these words and symbols may be accepted, 
if you are using any scripting (JavaScript, VBScript) to manipulate your 
frames, the results may be inconsistent or wrong. It’s a good idea to get 
into the habit of avoiding these words and characters. Word separation 
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can be indicated by capitalization, and underscore characters can also 
be used. 


. In the src text field, enter the name of the source page whose content 


you intend to display in the frame. 


Alternatively, you can click the Src folder and browse to select the 
source page. 


Select a scrolling option for your selected frame from the Scroll drop- 
down list. The options are as follows: 


e Yes: Adds scroll bars to the frame, whether they’re needed or not. 


e No: Doesn’t add scroll bars to the frame, even if a scroll bar is needed 
to display the entire frame. 


e Auto: Places one or more scroll bars in the frame if the frame con- 
tents exceed the frame boundaries. 


Default: Places one or more scroll bars in the frame, depending on 
the user’s browser settings. 


Select the No Resize check box if you don’t want the user to be able to 
resize the frame. 


If you do want the user to be able to resize the frame, leave the check 
box deselected. 


Format the frame border appearance by selecting a choice from the 
Borders drop-down list: 


e Yes: Creates a three-dimensional look for the borders. (This doesn’t 
work in all browsers.) 


e No: Creates a single-color flat look for the borders, or, if No is 
selected for each of the frames in a frameset, no border appears. 


e Default: Enables the user’s browser to set how borders appear. 


Select a border color for the frame by clicking the Border Color 
swatch and selecting a color from the Color palette that appears. 


Alternatively, you can enter a hexadecimal color code in the Border 
Color text field. This doesn’t work in all browsers and is optional. If your 
frames don’t have borders, the border color will not apply. 


Enter a number in pixels in the Margin Width and the Margin Height 
text fields. 


Margin Width specifies the horizontal standoff space between the frame 
content and the frame border. Margin Height specifies the vertical stand- 
off space between the frame content and the frame border. This is in 
addition to any values that the page called into the frame already has 
assigned. 
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Deleting frames 


To delete a frame, select the frame border and drag it to the edge of the 
parent frame or to the edge of the Document window — whichever is closer. 
If you only have two frames on the page, this action will result in a frameset 
with only one page in it. 


Saving frames 


Saving a frame means that you’re saving the HTML page from which the 
source content of the frame originates. To save a frame, follow these steps: 
1. Select the frame by clicking in it. 
2. Choose File™Save Frame. 


3. The first time you save the frame, enter a name in the File Name text 
field of the Save As dialog box that appears and then click the Save 
button. 


Future saves require that you complete only Steps 1 and 2. 


Saving framesets 


Saving a frameset means saving the layout of frame positions, frame names, 
and border formatting on a page. Keep in mind that you must save individual 
frames to save the content contained in those frames. To save a frameset, 
follow these steps: 


1. Select the frameset by clicking one of its borders. 
2. Choose File™Save Frameset. 


Note: This will not work if the frameset is nested. 


3. The first time you save the frameset, enter a name in the File Name 
text field of the Save As dialog box that appears and then click Save. 


Future saves require that you complete only Steps 1 and 2. 


\? EET A 
> If you have made changes to individual frames — not just the frameset — 
since your last save, Dreamweaver asks if you want to save individual 


frames. Make sure that you do so. 


Setting no-frames content 


Text-based browsers and many older browsers frequently don’t support 
frames and can’t correctly display pages that you create by using frames. 
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To help ensure that the maximum number of users can view your page cor- 
rectly, Dreamweaver offers you a method for building no-frames pages as 
companions to your frame-enabled pages. To create a no-frames page for 
your current frameset, follow these steps: 


1. Choose Modify>Frameset~Edit NoFrames Content. 


A blank, NoFrames Content page appears in the Document window and 
replaces your frame-enabled page, as shown in Figure 4-4. 
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2. On the NoFrames Content page, insert the content that you want to 
appear in NoFrames browsers. 


This content can include text, images, and other page elements. 


3. Return to your frame-enabled page by choosing Modify™Frameset™ 
Edit NoFrames Content. 


Targeting content 

You can set up a two-frame frameset in which you use the left frame for navi- 
gation and the main frame to display any link that the user clicks in the navi- 
gation frame. Simply set up the link to target the main frame as the location 
where you want the selected HTML page to open. 
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108 Structuring Pages with Frames 


Set up a target by following these steps: 


1. Select the text or image that you want to act as a link. 


Doing so opens the associated Property inspector. If the inspector 
doesn’t appear, open it by choosing Window™Properties. 


2. In the Link field, enter the name of the HTML source page that will 
appear in the frame. 


Alternatively, you can click the Link folder and browse to select the 
source page. 


3. From the Target drop-down list, select the target frame where the link 
is to appear. 


All available targets are listed in the drop-down list, as shown in Fig- 
ure 4-5. These targets include the names of all frames that you set up 
and also the following systemwide targets: 


e _blank: Opens a new browser window and shows the link in that 
window. The current window remains open. 


e _parent: Opens the link in a window that replaces the frameset con- 
taining the current page. 
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e _self: Opens the link in the current frame. The linked page replaces 
the page in the current frame. If you want the link to open in the cur- 
rent frame, you can select _se1f or leave the Target area in the 
Property inspector empty. 

e _top: Opens the link in a window that replaces the outermost frame- 
set of the current page. (Same as _parent, unless you’re using 
nested framesets.) 


Targeting can work in more complicated framesets using the same basic 
process. Whichever frame you target is the one that will update when the 


user clicks a link targeting that frame. 
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Chapter 5: Laying Out 
Pages with Layers 


In This Chapter 


Adding, selecting, and deleting a layer 
Placing objects in a layer 

Changing layer properties 

Nesting layers 


T: lay out the content of your Web page precisely, you can use tables 
(see Book II, Chapter 2), or you can use the latest and greatest layout 
aid: layers. You can think of layers in Dreamweaver 8 as separate pieces of 
transparent paper that you fill with content (images, text, and so on) and 
shuffle, stack, position, and overlap until your Web page looks exactly the 
way you want. 


Dreamweaver layers use a now common companion to HTML called 
Cascading Style Sheets (CSS) in order to place your content anywhere on 
the screen. However, you should be aware that Cascading Style Sheets are 
only supported in Internet Explorer and Netscape Navigator versions 4.0 
and higher. For more information about Cascading Style Sheets, check out 
CSS Web Design For Dummies, by Richard Mansfield (published by Wiley 
Publishing, Inc.). 


Before you begin working with layers, you may find it useful to have the 
Design panel open to the Layers tab. To do this, choose Window™Layers 
or, if you’re in hurry, simply press F2. 


Adding a Layer 


Adding a layer to the workspace of your Document window, shown through 
the drawing method in Figure 5-1, can be done using one of the following 
two methods: 


+ Choose InsertLayout Objects™Layer. If there is nothing on the page 
already, as in this case, a new layer appears in the upper-left corner of 
your Document window. 
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+ Click the Draw Layer button (just to the left of the Standard button) 
on the Layout category of the Insert bar. (If the Insert bar is not set to 
the Layout category, click the category name and choose Layout from 
the drop-down list.) Position the cross hair cursor anywhere in your 
Document window and click and drag until the layer obtains the dimen- 
sions you want. Release the mouse button. 
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If you set a layer’s visibility to Hidden, it may be invisible in the Document 
ar 


window. To see it, simply click the name of the layer in the Layers tab of the 
Design panel. Now you can see the layer, even though its visibility remains 
set to Hidden. See the “Changing the visibility of a layer” section, later in this 
chapter, for details on Visibility settings. 


Selecting a Layer 


Selecting a layer enables you to identify which layer you want to affect when 
executing a layer operation, such as moving or naming the layer. Use any of 
the following methods to select a layer: 
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+ In the Document window, click on the boundary of the layer. (Your 
cursor will turn into a four-pointed arrow when you place it over a layer 
boundary.) 


+ Inthe Document window, click anywhere inside the layer. (Note: This 
won’t work if the insertion point is already inside the layer you want to 
select.) 


+ Inthe Layers tab of the Design panel, click the name of the layer. 


Selection handles appear on the boundary of the layer to indicate that you 
have selected it. 


Deleting a Layer 


<r 


Deleting a layer removes the layer, the layer’s contents, and the layer marker 
from the Document window. To delete a layer, select the layer and press the 
Delete or Backspace key. 


Don’t delete a layer if you want to remove it from one page and add it to 
another. Instead, cut the layer by choosing EditCut or by pressing Ctrl+X. 
Open the page where you want to add the layer and choose Edit™Paste or 
press Ctrl+V. 


Placing Objects in a Layer 


To add an object to a layer, click inside the layer and follow the normal 
procedure for adding the object. For instance, add text to a layer by clicking 
inside the layer and typing text; add other objects to a layer by clicking 
inside the layer and choosing Insert™Object, where Object is the name of the 
item you want to add to the layer. 


Changing Layer Properties 


You can change lots of properties of layers, including 


+ Background: You can add a background image or color to a layer. 


+ Name: Naming a layer can help you keep track of objects on a complex 
page, and is necessary if you want to apply Behaviors to the layer. 


+ Alignment: You can align layers with each other. 


+ Visibility: Layers (and the objects on them) can be visible or invisible. 
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1 14 Changing Layer Properties 


+ Position: Layers can be nested inside other layers; they can also be 
stacked in different orders. 


+ Size: You can change the layer’s height and width. 


+ Location: You can move a layer to any location on a page. 


We show you how to edit each of these layer properties in the following 
sections. 


Including a background image or color in a layer 


By default, an unnested layer does not have a color or background image 
and will just display what lies beneath it as if it was transparent. (A nested 
child layer, if it’s empty, will show the color or background image of its parent. 
For more about nested layers, see the “Nesting Layers” section, later in this 
chapter.) 


You can change the background of any layer by adding a background image 
or color as follows: 


1. Select the layer whose background you want to change. 


If the Layer Property inspector does not appear, open it by choosing 
Window™Properties. 


2. In the Layer Property inspector, change one of the following: 


e Bg Image: Click the folder to the right of the text field and browse to 
select a background image from the Select Image Source dialog box 
that appears. Click the Select button to accept your image choice 
and close the dialog box. The path to and name of the background 
image appear in the Bg Image field and the image is added to the 
background of the layer. Figure 5-2 shows a layer with a background 
image. 


e Bg Color: Click the color box (the little gray box with an arrow on it) 
and select a color from the color palette that appears. Alternatively, 
you can enter a hexadecimal number for a color in the Bg Color field. 
The new color appears in the background of the selected layer. 


Naming a layer 

The first layer you add to a page is automatically named Layer1, the second 
layer you add is named Layer2, and so on. You can change these default 
number names to other names that help you more easily distinguish layers 
when working with HTML and examining layers with the Layer Property 
inspector or Layers tab of the Design panel. 
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To name a layer using the Layers tab of the Design panel, follow these steps: 
1. If the Layers tab of the Design panel is not already visible, choose 
Window™Layers or use the keyboard shortcut F2. 
2. Double-click the Name column for the layer whose name you want to 
change. 
The current name is selected. 
3. Enter a new name for the layer. 
Remember that layer names cannot contain spaces. 
D 


Get in the habit of appropriately naming your layers as soon as you create 
them. The name BlueprintImageMap helps you remember a layer’s content 
much better than Layer15. 


Aligning layers 

Aligning layers with each other can help you precisely lay out visual content 
in the Document window. You can align the top, left, right, or bottom sides of 
layers. 
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Figure 5-3: 
Setting your 
default 
preferences 
for layers. 


To align layers, select the layers you want to align by pressing and holding 
the Shift key and then clicking each layer in the Document window. Choose 
ModifyArrange™Align and choose one of the following options from the 
submenu: 


+ 


+ 


Left: Assigns the x-coordinate of the last selected layer to all selected 
layers. 


Right: Aligns the right side of all selected layers with the right side of 
the last selected layer. 


Top: Assigns the y-coordinate of the last selected layer to all selected 
layers. 


Bottom: Aligns the bottom of all selected layers with the bottom of the 
last selected layer. 


Make Same Width: Gives all the layers the same width as the last 
selected layer. 


Make Same Height: Gives all the layers the same height as the last 
selected layer. 


Changing the visibility of a layer 

You can specify whether a layer is visible or hidden when a Web page 

loads — first appears in the user’s browser window — and as a result of spe- 
cific actions by the user. Visibility can change as many times as you want. 
Visibility options consist of the following: 


+ 


Default: The layer’s initial visibility is the default setting, which is visi- 
ble. To edit layer default settings, choose Edit™Preferences and the 
Preferences dialog box (see Figure 5-3) appears, displaying the layer 
default settings that you can change. 
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+ Inherit: For a nested layer, the layer’s initial visibility is the same as the 
visibility of its parent. For an unnested layer, selecting the Inherit option 
causes the layer to appear as visible. 


+ Visible: The layer’s initial visibility setting is Visible. 
+ Hidden: The layer’s initial visibility is Hidden. 


You can use either the Layer Property inspector or the Layers tab of the 
Design panel to set layer visibility. By setting layer visibility, you can create 
scripts that cause images to appear (or disappear) in response to user inter- 
action. For example, you can create an image of a widget that appears ona 
Web page after a user clicks a link marked, Click Here to See Our Top-of-the- 
Line Widget! 


To set the initial visibility of a layer via the Layer Property inspector, select 
the layer in the Document window to open the Layer Property inspector. 

If the inspector does not appear, open it by choosing Window™Properties. 
Choose a visibility option from the Vis drop-down list. 


Layering layers: Setting the z-index 

The z-index of a layer indicates the layer’s position in a stack of multiple 
layers. Z-indices are useful when you have a handful of layers — some con- 
taining transparent portions, some of different sizes — stacked one on top of 
the other. Changing the z-index of your layers lets you “shuffle” the layers — 
much as you shuffle a deck of cards — to create interesting visual effects. 


Z-indices are measured in whole numbers and do not have to be 
consecutive — for instance, you can have three layers with z-indices of 1, 3, 
and 7, respectively. The layer with the largest z-index sits on top of the layer 
stack and the layer with the smallest z-index sits on the bottom of the layer 
stack. Layers with larger z-indices obscure those with smaller z-indices. You 
can change the z-index of a layer in either the Layer Property inspector or 
the Layers tab of the Design panel. 


To assign the z-index of a layer by using the Layer Property inspector, follow 
these steps: 
1. Select the layer to open the Layer Property inspector. 


If the Layer Property inspector does not appear, open it by choosing 
Window™Properties. 


2. Enter a new number in the Z-Index field of the Layer Property 
inspector. 
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Figure 5-4: 
Changing 
the z-index 
of the layer 
named 
“SupptText.” 








To assign the z-index of a layer using the Layers tab of the Design panel, 
follow these steps: 


1. If the Layers tab of the Design panel is not already visible, choose 
Window™Layers or use the keyboard shortcut F2. 

2. Click the Z column for the layer whose z-index you want to change. 
The current z-index is selected. 

3. Enter a new z-index for the layer. 


The new number appears in the Z column for the selected layer, as 
shown in Figure 5-4. 


4. Click anywhere outside the Z column or press the Enter key. 


Note that you can have multiple layers at the same z-index. 
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To assign relative z-indices to layers by reordering layers in the Layers tab of 
the Design panel, follow these steps: 


1. Open the Layers tab of the Design panel by choosing Window™Layers 
or by using the keyboard shortcut F2. 


The Layers tab lists layers in order of descending z-index. Nested layers 
are listed in descending order within their parent layer. 


2. Click the name of a layer for which you want to change the z-index. 


3. Drag the layer name into a new list position and release the mouse 
button. 


As you drag, the selected layer is indicated by a thick line. 


Figure 5-5 shows the effect of changing a z-index. In the top image, the z-index 
of the bowling pins is higher than the starry background image. As a result, 
the bowling pins are on top. Conversely, in the bottom image, the starry back- 
ground image has the higher z-index value, and as a result, it’s on top of the 
bowling pins. Dreamweaver reorders the list in the Layers tab and renumbers 
layer z-indices to reflect your change. Also, Dreamweaver updates the associ- 
ated code for the layers’ z-indices in the HTML source code for your page. 
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Figure 5-5: 
The effect 
of changing 
z-indices. 








Because you don’t have to number the z-index of layers consecutively, con- 
sider leaving gaps between indices in case you later want to add new layers 
into the middle of the stack. For instance, use only even numbers for your 
indices so that you can easily sandwich a layer with an odd-numbered z-index 
in between. 
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Moving a layer 
You may want to move a layer to another location in the Document window 
or to a position relative to the grid or to other objects. 


To move a layer, select the layer in the Document window and then reposi- 
tion your selection by using one of the following three methods: 


+ Click and drag the layer to a new location and release the mouse button. 


+ Press the arrow keys to nudge the layer up, down, left, or right one pixel 
at a time. If you hold down the Shift key, every press of an arrow key 
moves the layer by ten pixels. 
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+ Inthe Layer Property inspector, enter a new value in the T (top) and L 
(left) fields to indicate the pixel coordinates of the layer’s top-left corner. 


When moving layers, you can choose to enable or prevent layer overlap, 
depending on how you want the final image montage to appear. You enable 
or prevent layer overlap by selecting or deselecting the Prevent Overlaps 
check box in the Layers tab of the Design panel. 


Resizing a layer 
Resizing a layer means changing its height and width dimensions. To resize a 
layer, select the layer and perform one of the following tasks: 


+ Click and drag a selection handle — one of the large dots on the layer 
boundary — until the layer obtains the dimensions you desire. 


+ Inthe Layer Property inspector, enter a new width in pixels at the W 
field and a new height in pixels at the H field. If the Layer Property 
inspector does not appear, open it by choosing Window™Properties. 


You can change the height and width dimensions of multiple layers at the 
same time as follows: 


1. Press and hold the Shift key while selecting each layer you want to 
resize. 


If the Multiple Layers Property inspector does not appear, open it by 
choosing Window™Properties. 


2. In the Multiple Layers Property inspector, enter a new width in pixels 
in the W field and a new height in pixels in the H field. 


Nesting Layers 


A nested layer is a layer that has all of its HTML code lying within another 
layer. The nested layer is often referred to as a child layer, whereas the layer 
on which it depends is called the parent layer. A child layer can be drawn com- 
pletely inside its parent (as shown in Figure 5-6), in an intersecting arrange- 
ment with its parent, or completely unattached to its parent, depending on the 
effect you want to achieve. A nested layer inherits the same visibility of its 
parent and moves with the parent when the parent layer is repositioned in the 
Document window. Some older versions of Netscape have issues with nested 
layers, so try to avoid using them if there is a simpler way to accomplish the 
same thing. 





Figure 5-6: 
A layer 
nested in 
another 
layer. 
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Enabling nesting 


To create nested layers in the Document window, you must first enable nest- 
ing. To do so, follow these steps: 


1. 


aa kr V N 


Choose Edit™Preferences to open the Preferences dialog box, or use 
the keyboard shortcut Ctrl+U. 


. In the Preferences dialog box, select Layers in the Category area. 
. Select the Nesting check box. 
. Click OK to close the Preferences dialog box. 


. In the Document window, choose Window™Layers to open the Layers 


tab of the Design panel. 


. In the Layers tab, make sure that the Prevent Overlaps option is 


deselected. 


Creating a new nested layer 


Use either of these methods to draw a nested layer after enabling nesting: 
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+ Click inside an existing layer and choose Insert™Layout Objects™Layer. 
A child layer of default size appears inside the parent layer. 


+ Choose Layout Tools™Draw Layer in the Layout category of the Insert 
bar. Then click and drag your mouse in the parent layer, releasing the 
mouse button when the layer has reached the dimensions you desire. 


Nesting an existing layer 
To change the nesting of an existing layer, follow these steps: 
1. Open the Layers tab of the Design panel by choosing Window™Layers 
or using the keyboard shortcut F2. 


2. In the Layers tab of the Design panel, press and hold the Ctrl key 
while using the mouse to click and drag the intended child layer on 
top of its new parent. 


The child is in the correct position when you see a box appear around 
the name of its intended parent layer. 


3. Release the mouse button. 
The new child-parent relationship is shown in the Layers tab of the 
Design panel. 


Dreamweaver draws the new child layer and updates the associated code for 
changed layer-nesting in the HTML source code for your page. 


Collapsing or expanding your view in the Layers tab 


You can change how you view the names of nested layers in the Layers tab 
of the Design panel by collapsing or expanding your view: 


+ To collapse your view: Click the minus sign (>) in front of a parent layer. 
Names of nested child layers for that parent are hidden. 


+ To expand your view: Click the plus sign (+) in front of a parent layer. 
Names of nested child layers appear underneath that parent layer. 
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MX 7 Developer Edition in 
Dreamweaver & 


In This Chapter 


Exploring how ColdFusion is integrated into Dreamweaver 
Using the Tag Editor and the Insert panel 

Viewing database connections 

Using the Bindings tabs to get dynamic data 


Taking a brief look at server behaviors and components 


Q: of the biggest changes that came with the advent of Macromedia 

Studio was the integration of ColdFusion into Dreamweaver. For years, 
the two products had a symbiotic relationship, and as a result, their integra- 
tion was an exceptionally smooth one. Dreamweaver was always better than 
ColdFusion Studio as a graphical HTML editor. ColdFusion Studio and its 
sister product, Macromedia HomeSite, were the better choices for the HTML 
editor who preferred a code-friendly interface. This chapter provides the 
lowdown on the features in Dreamweaver that bring ColdFusion to life. 

y This chapter only covers the ColdFusion features that are available in 

Dreamweaver. For a complete rundown of ColdFusion and how it works, 

check out Book VII. 


Understanding the Integration of 
ColdFusion and Dreamweaver 


Previously, Dreamweaver was largely geared toward the basics of HTML 
editing, such as creating and editing tables, graphics placement, text editing, 
and some basic site management tools. With the integration of ColdFusion, 
Dreamweaver became more robust, with a host of features that could make 
your site more dynamic. 


Before the original Dreamweaver MX arrived, ColdFusion was made up of 
three components: 
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+ A Web-based application server that read HTML and ColdFusion code 
and generated HTML for a browser to view. 


+ A scripting language that enabled users to perform a number of dynamic 
functions, such as querying databases and personalizing Web pages 
based on user input. 


+ A stand-alone development tool (ColdFusion Studio) that was used to 
create ColdFusion code and manage some parts of the application server. 


In Dreamweaver, you can find ColdFusion features in the following areas: 


+ Code view: Select Code view by choosing View™Code. This is the devel- 
opment view that was traditionally associated with ColdFusion Studio. 
Figure 6-1 shows both the view from ColdFusion Studio 5 and the Code 
view in Dreamweaver 8. You can see that a lot of the physical features 
look the same. 


+ Insert bar: If you’ve used the previous version of Dreamweaver, you'll 
notice a major interface change in the Insert function in Dreamweaver 8. 
In an old version, there was an Insert panel that utilized tabs to jump 
from section to section. In Dreamweaver 8, when you click the name at 
the far left on the Insert bar, a listing of all the available sections (what 
Macromedia calls “categories”) pops up. Scroll up or down and select a 
name to see the buttons in that category of the Insert bar. You find 
ColdFusion-specific functions in the Common, CFML, and Application 
categories. 


+ Application panel: To bring up the Application panel, choose Window, 
and then any of the following: Database, Bindings, Server Behaviors, or 
Components. This brings up the Application panel with the appropriate 
tab selected. Within the Application panel, you can configure databases, 
set up links to your remote site, and create ColdFusion components. 


+ Code panel: The Code panel, not to be confused with Code view, pro- 
vides some valuable reference information about your code. (The Code 
panel is shown in Figure 6-2.) You can bring up the panel by choosing 
either Snippets or Reference from the Window menu: 


e Snippets tab: With the Snippets tab, you can create reusable chunks 
(snippets) of code. 


e Reference tab: The Reference tab gives you access to O’Reilly’s ref- 
erence guides to HTML, JavaScript, and more, as well as guides to 
ColdFusion, ASP, and JSP. 


In previous versions of Dreamweaver, Code view also included a Tag Inspector, 
which reviewed the quality of your HTML code. That function is still there, 
though in Dreamweaver 8, this feature has been given its own floating panel. 
You can still get to it by choosing Window™Code Inspector. 
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Using Features on the Insert Bar 


When you have a ColdFusion page open, the Insert bar gives you access to a 
number of ColdFusion features, and using those ColdFusion features is pretty 
straightforward. Almost all the features include a Help button to explain to 
you precisely what the feature does. 


To insert a ColdFusion feature, follow these steps: 


1. Select the category in the Insert bar for the element you want to 
insert. 


You can choose from four ColdFusion categories: Common, CFML 
(ColdFusion Markup Language), CFFORM, and Application. The other 
categories are for regular Dreamweaver features. 


2. Click the icon of the feature you want to insert. 


If the feature has parameters that need to be set, a dialog box will appear 
that allows you to set all the parameters for the selected feature. Fig- 
ure 6-3 shows a dialog box for a Cfquery tag (with Cfquery, you can 
retrieve information from a database). For more information on how to 
use all these features, check out Book VII. 


ye : ; 
A If you move your mouse over an icon and keep it there, the name of the 


feature appears over the icon, allowing you to see what function that 
icon serves. 


3. Enter all the pertinent information in the dialog box for the element 
that you selected in Step 2. 


Again, the information you must enter varies, depending on which tags 
or elements you selected. 


4. Click OK to insert the element. 





Figure 6-3: 
The Cfquery 
dialog box. 








Figure 6-4: 
The Flow 
and 
Advanced 
pop-up 
menus. 
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Tag Editor - Clquery 
General Cfquery - General 
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Persistent Queries 


Query name: | feqlestianiCountyLostaip| 
Data source: | srequest.calhosataeONS + 
User name: 
Password: 
SQ: r- 
SELECT countylD. countyName 
FROM [dbo] [CNTYINFO] 
ORDER BY countyName 
































In Dreamweaver 8, the ColdFusion commands have been consolidated from 
five tabs in the Insert panel to just four categories on the Insert bar. The 
Common category includes a Tag Chooser button, from which you can select 
ColdFusion CFML tags. Beyond that, all the ColdFusion features are either in 
the CFML, CFFORM, or Application categories on the Insert bar. 


The CFML category includes access to the largest number of CFML tags and 
functions. Note that the last two icons in this category are entitled Flow and 
Advanced. This is where buttons from the old CFML Flow and CFML Advanced 
tabs landed. If you click these icons, you get pop-up menus, shown in Fig- 
ure 6-4, which reveal a number of other functions that you can include in your 
documents. Here’s a complete listing of the buttons in the CFML category: 


+ Server variables: Creates server variables 





+ cfquery: Creates a <CFQUERY> tag 


@| 
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AY cfcontent 
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$+ 4444+ 44+ 4 + 


cfoutput: Creates a <CFOUTPUT> tag 
cfinsert: Creates a <CFINSERT> tag 


cfupdate: Creates a <CFUPDATE> tag 








cfinclude: Creates a <CFINCLUDE> tag 





cflocation: Creates a <CFLOCATION> tag 
cfset: Sets the value of a variable 
cfparam: Creates a parameter 
Comment: Creates the comment arrows 


Surround with #: Surrounds the selected text with # signs 





cfscript: Creates a <CFSCRIPT> tag into which you can put ColdFusion 
Script 


Click the Flow icon to access the following features: 


+++ +44 44+ 4 + + 


+ 


cftry: Creates a <CFTRY> tag 
cfcatch: Creates a <CFCATCH> tag 
cfthrow: Creates a <CFTHROW> tag 
cflock: Creates a <CFLOCK> tag 


cfswitch: Creates a <CFSWITCH> tag 








cfcase: Creates a <CFCASE> tag 


cfdefaultcase: Creates a <CFDEFAULTCASE> tag 











cfif: Creates a <CFIF> tag 














cfelse: Creates a <CFELSE> tag 














cfelseif: Creates a <CFELSEIF> tag 





cfloop: Creates a <CFLOOP> tag 


cfbreak: Creates a <CFBREAK> tag 











Click the Advanced icon to access the following features: 


+++++ 


cfcookie: Enables you to specify the parameters of creating a cookie 
cfcontent: Enables you to specify how to create a content tag 
cfheader: Enables you to specify the parameters of creating a header 
ColdFusion Page Encoding: Sets your page encoding information 
cfapplication: Enables you to specify your application parameters 


cferror: Specifies error information 
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+ cfdirectory: Allows you to work with directories (create, delete, list, and 

so on) 
+ cffile: Enables you to work with files (create, append, write, and so on) 
+ cfmail: Specifies how to send e-mail through ColdFusion 
+ cfpop: Specifies how to send messages through a POP server 
+ cfhttp: Specifies how to make an HTTP request 
+ cfhttpparam: Specifies how to set parameters for an HTTP request 
+ cfldap: Specifies how you can access an LDAP store 
+ cfftp: Specifies how to make an FTP request Book II 
+ cfsearch: Builds an interface to Verity to make searches Games 
+ cfindex: Builds an interface to index a Verity search collection z5 
+ cfimport: Allows you to import a custom CF tag library or a JSP tag library T ae 
+ cfmodule: Allows you to specify a module a F z 
+ cfobject: Enables you to call a component z E Z, 
+ cfchart: Specifies how to use ColdFusion’s charting features Ha 
+ More Tags: Brings up the Tag Chooser dialog box 


Figure 6-5 shows the Application category of the Insert bar in Dreamweaver, 
which allows you to access the following ColdFusion features: 


+ Recordset: Allows you to connect to and retrieve data from a database 
and creates the <CFQUERY> tag for you 


+ Stored Procedure: Allows you to execute a stored procedure against an 
SQL database and specify parameters to be passed as part of that call 


Figure 6-5: 
Getting at 
the Application y Ge AES a MT Hal 
Application 

features. 














+ Dynamic Data: Creates either dynamic text or a table, or populates vari- 
ous form elements with data from a database 


+ Repeated Region: Enables you to create a repeated region 


+ Show Region: Enables you to show or not show a specific area of con- 
tent based on a set of criteria 
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+ + 


+++ + + 


+ 


Recordset Paging: Creates dynamic page-scrolling arrows for a recordset 


Display Record Count: Shows how many records you have from a given 
query — first, last, and total number 


Master Detail Page Set: Creates a master detail page 

Insert Record: Creates a form to insert a database record 
Update Record: Creates a form to update a database record 
Delete Record: Creates a form to delete a database record 


User Authentication: Provides a series of tools to log a user in or out, or 
to restrict access to a page 


XSL Transformation: Allows you to lay out an XML document using the 
XSLT scripting language 


In addition to these three categories of the Insert bar, you can also access 
the CFFORM category. Here, you can insert all of the CFFORM elements and 
specify the parameters for each. For more information on how CFFORM 
works, check out Book VII Chapter 7. 


Editing a Tag 


After you’ve inserted a tag into your ColdFusion code, you may need to edit 
that tag later. You can edit the code directly or you can use the Tag Editor, 
which provides a cleaner way to see all the parameters for your tag. (Note: 
Not all tags have this option; if you don’t see Edit Tag in Step 3, then you 
know the tag you’re working with doesn’t support this feature.) To use the 
Tag Editor, follow these steps: 


1 


. If necessary, switch to the Code view in the Document window by 


choosing View™Code. 


2. Place your cursor anywhere in the opening tag you want to edit. 


3. Right-click and choose Edit Tag from the context menu. 


The Edit Tag dialog box appears. 


. Change the value in the dialog box and then click OK to update the tag. 


The value changes, depending on which tag you’re editing. 


Getting Data from a Database 


You can set up a database connection using the ColdFusion Administrator, 
as described in Book VII, Chapter 6. Using the Dreamweaver interface, how- 
ever, when you’re in Code view, you can look directly into a database to see 
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the tables and columns that make up a database. More importantly, you can 
then easily add those tables and columns to your ColdFusion code simply by 
dragging them onto the screen. Here’s how: 


1. Open the Application panel to the Databases tab by choosing 
Window™Database. 


You see a list of the databases on your testing server. For this example, 

we use the cfcodeexplorer database, one of the sample databases that 

comes with ColdFusion. 

2. Click the plus (+) button next to the cfcodeexplorer database. 

This shows you the views, tables, and stored procedures for the database. Book II 
Chapter 6 
3. Expand the artists table by clicking the plus (+) buttons next to the one 

first Tables and then the artists table. 


All the columns in the table should now be visible, as shown in Figure 6-6. 





ul uonIpy 


| w Application = 


Databases | 
[E] Document type:ColdFusion we 


Jadojanag / XIN 
uoisn4pjo) Busy 





4 (@  cfartgalery 

4 (p cfbookcub 

= [F] cfcodsexplorer 
E- fy ored procedures 
2 Ey Tables 


Ta ADORESS (VarChar 50) 

Sa ARTISTID (Long 10 Required) 
Ta CITY (¥arChar 20) 

Fa EMAIL (varchar 50) 

Fa, FAK (VarChar 12) 

Sa, FIRSTNAME (VarChar 20 Requred) 
Ma LASTNAME (YarChar 20 Required) 
Ta PHONE (VarChar 20) 

Ra POSTALCODE (VarChar 10) 
Sa, STATE (VarChar 2) 

Fly THEPASSWORD (VarChar 8) 
authors 

books 

media 

members 

orders 

orig_art 

orig_artists 

orig_authors 

orig_books 

orig_media 

orig_members 

orig_orders 

B views 


2 
4] (@  cfdocexemples 


3-4) 


BEESERERSEEB 


tees 





Figure 6-6: 
The artists 
table. 











4. Click and drag the LastName column from the panel onto the work 
area. 


You see that this adds the column name to the work area. 
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Figure 6-7: 
Getting 
names from 
a database. 





For the feature described in the previous steps to work, you need to have 
an active testing server configured and you need to know the Remote Data 
Services password for your testing server. Check out Book VII, Chapter 2 for 
more information. 


Now, by itself, this doesn’t really accomplish a whole lot. All you’ve really 
done is drag a column name onto your work area. To really see this feature 
in action, try adding the following code to your page, in between the <BODY> 
tags: 











<CFQUERY name="DatabaseTest" datasource="cfcodeexplorer"> 
select LastName from artists 
</CFQUERY> 








<CFOUTPUT query="DatabaseTest"> 
#lastname#<BR> 
</CFOUTPUT> 





Now, press the F12 key to preview the page in a Web browser and you see a 
whole list of names, as shown in Figure 6-7. If you’d like, try adding some other 
fields in the code between select and from, making sure that the fields are 
all separated by commas. If you then add the field name to CFOUTPUT, sur- 
rounded by pound signs (#), you see those fields displayed as well. For more 
information on accessing data from a database using ColdFusion, check out 
Book VII, Chapter 6. 
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Using the Bindings Tab 


Figure 6-8: 
The 

Recordset 
dialog box. 


The Bindings tab of the Application panel provides another interface to data 
sources; for someone unaccustomed to working with ColdFusion, it is an easy 
way to begin to understand CFML. Binding, in the Dreamweaver vernacular, 
is just a link between the page and some other datasource that provides data 
to the page. With this interface, you can build the same query we used in the 
example in the previous section as follows: 


1. Press Ctrl+N; in the New Page dialog box that appears, select Dynamic 
Page and ColdFusion, and then click the Create button. 
This creates a new ColdFusion document. 


2. Save the document into a site that has a remote server configured to 
see the sample ColdFusion databases. 


3. Switch to the Bindings tab by choosing Window™Bindings. 


4. Click the plus (+) button and select Recordset (Query) from the drop- 
down list. 


The Recordset dialog box, shown in Figure 6-8, appears. 














Recordset ix} 
Name: Recordseti| OK 
Data source: None { [canes | 
User name: (anita 
Password: [Advanced al 
Table: { l Help | 
Columns: © All © Selected: 
Fiter: None {v 
Sort: None {v 











5. Type a name, such as DatabaseTest, into the Name field. 
6. Select cfcodeexplorer from the Data Source drop-down list. 


You may also need to input the username and password for the testing 
server. If you configured the remote testing server, you should know the 
username and password. If not, you may need to check with your organi- 
zation’s database administrator. 
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7. Select the artists table from the Table drop-down list. 


8. Select the radio button labeled Selected from the Columns option and 


10. 


11. 


12. 


choose LastName from the scroll list (it will show up when you select 
the radio button). 


. Leave the Filter and Sort fields set to None. 


These two tools, which you should try as you get more comfortable with 
using the Bindings tab, allow you to further refine and sort the data from 
the artists table. 


Click OK to add the Binding. 


Dreamweaver adds a new record in the Bindings tab and the following 
code to the Code view: 





<CFQUERY name="DatabaseTest" 
datasource="cfcodeexplorer"> 
SELECT LastName FROM artists 
</CFQUERY> 























This code tells the server to get all the last names from the artists table 
in the cfcodeexplorer database. When the page is read, this query 
retrieves the data and makes it available to be output. 


To make the last names output when the page is loaded, click and 
drag the LastName lightning bolt icon from the Bindings tab on the 
Application panel to the Document window. 


Dreamweaver creates the following code and adds it to your workspace: 





<CFOUTPUT query="DatabaseTest"> 
#DatabaseTest.LastName# 
</CFOUTPUT> 








This tells ColdFusion to display the LastNames (all of them) when the 
page is loaded. 


Press F12 to preview the page. 


When the page loads, you’ll notice that the names are output one right 
after another without anything in between them. You can add a line 
break (<BR>) or a comma after #DatabaseTest.LastName#, and 
ColdFusion will add the comma or line break after every record. 





Queries are only one kind of Binding that Dreamweaver supports. You can 
see all the others when you click the plus (+) button on the Bindings tab. 

As you become more familiar with ColdFusion, you'll no doubt want to use 
some of these other kinds of Bindings, notably the Stored Procedure and the 
Form, Session, Client, and Application variables. 


Introducing Server Behaviors and Components 135 


Introducing Server Behaviors and Components 


The Server Behavior and Components tabs in the Application panel are 
similar in both design and concept to the Bindings panel. The following sec- 
tions cover them only cursorily, because to use these tools to their fullest 
extent, you need an advanced working knowledge of ColdFusion and code 
development. 


Understanding server behaviors 


Server behaviors are code elements that make a request to the ColdFusion 
Server and receive some sort of data in return. If that sounds similar to the Book Il 
preceding Bindings example, it is! You can do that Recordset example from 
the earlier section, “Using the Bindings Tab,” from the Server Behaviors tab. 
However, a number of more advanced server behaviors are beyond simple 
queries that you can do from this tab. Table 6-1 describes each of the server 
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behaviors that Dreamweaver offers. aoe 
JE 
Table 6-1 Server Behaviors z E Z, 
Name Function HZ 
Recordset Makes a query to a data source 
Stored Procedure Passes information to a Stored Procedure 
CFParam Builds a <CFPARAM> tag 
Repeat Region Allows you to create a repeated region 
Recordset Paging Creates forward, backward, first, and last links for a 
recordset 
Show Region Shows a region of content based on preset conditions 
Display Record Count Displays the record count for a recordset 
Dynamic Text Displays dynamic text based on a query 
Insert Record Inserts a record through a form 
Update Record Updates a record through a form 
Delete Record Deletes a record through a form 
Dynamic Form Elements Creates form elements based on a corresponding query 
and recordset 
User Authentication Creates all the code necessary to add user authentication 
toa site 


Considering components 


Components are reusable bits of ColdFusion code that can be used through- 
out your Dreamweaver Site. Dreamweaver comes with a number of sample 
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components to show you how they work. In practical terms, though, you 
create your own components based on the needs of your Site. 


Suppose that you’re building a site that sells boxes online and you have a tool 
that calculates the volume of the various types of boxes that you sell. Because 
it’s used globally by the site, this tool shouldn’t be repeated in every single 
ColdFusion page. Instead, it should be in an area where all pages can access 
it and just pass along the value obtained by performing a calculation. If you 
built it as a component, this calculator could be accessed anywhere. If there 
are ever any changes to the tool (say you changed from cubic feet to cubic 
meters), you’d only need to make the change once, instead of many times. 


The Components tab provides developers with a framework for building 
these kinds of tools. From this tab, you can specify the following for a new 
component: 


+ General information about the component (such as its name and where 
it’s located) 

+ Properties of the component (queries, arrays, strings, and so on) 

+ The functions associated with the component 


+ The arguments (data) the component will accept from another page 
or form 


Chapter 7: Advanced Web 
Page Design Techniques 


In This Chapter 

Creating hotspots 

Adding Flash text and button rollovers 
Adding a rollover behavior to an image 
Creating a navigation bar 

Inserting audio and video into your pages 
Using templates 

Validating your code 


Í: previous chapters of Book II, we focus on providing a good working 
knowledge of Dreamweaver 8. Now we need to spend some time looking 
at the more advanced uses of Dreamweaver in Web development. In this 
chapter, we show you how to make images a bit more striking and how you 
can bring some other multimedia elements to life. 


Creating Clickable Image Maps with Hotspots 


You can designate certain areas of an image as hotspots — active areas that 
a user can click to open a link to another Web page or activate some other 
behavior. Hotspots can be shaped like rectangles, circles, or polygons (irreg- 
ular objects). The coordinates of the hotspots are grouped into chunks of 
HTML code called image maps. 


Creating a hotspot 

Check out Figure 7-1. It shows a typical navigation bar for a site as a single 
JPEG image. The following procedure shows you how to create an image 
map for part of that image by adding hotspots: 


1. Select the image to which you want to add a hotspot. 


The Image Property inspector appears. If the bottom half of the Image 
Property inspector is not visible, click the Expander button, which is 
the down arrow in the bottom-right corner. 
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Figure 7-1: 
A typical 
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2. In the Map area of the Image Property inspector, click the Hotspot 
button for the shape you want to draw. 


You can choose a rectangle, a circle, or a polygon. Your mouse pointer 
becomes a cross hair cursor when you move it over the image. 


3. Draw the hotspot according to the shape you select: 


e Circle or rectangle: Click your cross hair cursor on the image and 
drag diagonally to create a hotspot. Release the mouse button when 
the hotspot reaches your desired dimensions. The area you draw is 
highlighted light blue, and the Hotspot Property inspector appears. 


e Polygon: Click your cross hair cursor on the image once for each 
point. The area you draw is highlighted light blue and the Hotspot 
Property inspector appears. 


4. In the Hotspot Property inspector, supply the following information: 
e Map: Enter a unique name for the image map. 


e Link: Enter a URL or the name of an HTML file you want to open 
when the user clicks the hotspot. Alternatively, you can click the 
folder icon and browse to select the link from your files. Note: 
Completing this field is optional. Instead, you may choose to attach a 
behavior to the hotspot. 


e Behaviors: To attach a behavior other than a link to the hotspot, open 
the Behaviors tab of the Tag panel by choosing Window™Behaviors 
or by using the keyboard shortcut Shift+F3. Then click the Add (+) 
button in the Behaviors panel, which opens a pop-up menu of avail- 
able behaviors, including Check Plugin, Play Sound, Popup Message, 
Preload Images, and many others. Choose a behavior from the pop-up 
menu, complete the information in the dialog box that appears for 
your selected behavior, and click OK. 


e Target: Complete this field if you entered a link in the Link field and 
you want the link to open in a window or frame other than the one 
you're linking from. Click the arrow and select from the drop-down 
list a target window where you want your selected link to appear. You 
can select from the following choices: _blank (opens the link in a 
new window), _parent (opens the link in the parent of the currently 
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opened window; if the currently opened window was opened from 
another frame, the link will open in that frame), self (the default; 
opens the link in the currently opened window; not selecting a Target 
produces the same effect), and _top (opens the link in the top-level 
window, replacing frames, if any). If you have created frames, you 
can also select a frame name from this list. Gee Book II, Chapter 4 for 
more information about frames.) 


e Alt: Enter the text you want to show when the user moves the mouse 
pointer over the hotspot. Alt text also makes information about the 
hotspot accessible to vision-impaired users. 


« « Book Il 
Modifying a hotspot Chapter7 
If you need to change the size or shape of a hotspot after you’ve created it, 
or you need to change the link, target, or Alt information for the hotspot, use 
the following procedure to edit the hotspot: 


1. On an image in the Document window, click the hotspot you want to 
modify. 


The Hotspot Property inspector appears. If the inspector does not 
appear, open it by choosing Window™Properties. 
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2. Edit the Link, Target, or Alt information you want to change in the 
Hotspot Property inspector. 


3. If you want to reshape or resize the hotspot, select the Arrow tool in 
the Hotspot Property inspector and then click any handle of the 
selected hotspot and drag the handle to a new location. 


4. If you want to reposition the hotspot, select the Arrow tool in the 
Hotspot Property inspector, click anywhere within the hotspot, and 
drag it to a new location. 


5. You can delete a hotspot by selecting it and pressing the Delete key on 
your keyboard. 


Adding Flash Text Rollovers 


A text rollover is text that changes color when users move their mouse pointer 
over it. (One color appears to “roll over” to the next color.) One way to 
create text rollovers in Dreamweaver is by adding Flash text to your pages, 
as described in the following section. 


Flash text and Flash buttons are so named because Dreamweaver implements 
these features using the same code that Macromedia Flash 8 (the animation 
program included in the Macromedia Studio 8 suite) uses. 
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Adding Flash text 


To add hyperlinked Flash text that changes color when users roll their 
mouse over it, follow these steps: 
1. Click in the Document window where you want to add Flash text. 
2. Choose Insert>Media™Flash Text. 


Your page must be saved before you can insert Flash text. If the page 
hasn’t been saved at least once, an alert pops up to remind you to save 
the page so you can insert the Flash text. 


3. In the Insert Flash Text dialog box, shown in Figure 7-2, select a font 
from the Font drop-down list. 
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4. Enter a point size for your text in the Size text field. 
5. If you want, you can also format the text. 


You can click the Bold button and/or Italics button. You can also click an 
alignment button. Alignment choices are Left, Center, and Right. 


6. Select a Color (the initial color) and a Rollover Color (the color the 
text changes to when users move their mouse pointer over it) by click- 
ing the color swatch in each area and selecting a color from the color 
palette that appears. 


«e 


7. 


8. 


10. 


11. 


12. 
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Enter your text in the Text field. Select the Show Font option if you 
want to view the characters in the Text field in your selected font. 


In the Link field, enter a URL or the name of the page you want to 
appear when the user clicks the Flash text. 


Alternatively, you can click the Browse button to select a page from your 
files. 


. In the Target area, click the arrow and select from the drop-down list 


a target window where the linked page will appear. 


If you have created frames, you can select a frame name from this list, or 
you can select from the following choices: 


e _blank: Opens the link in a new window. 


e _parent: Opens the link in the parent of the currently opened 
window. 


e _self: Opens the link in the currently opened window; this is the 
default. Leaving the Target area empty produces the same result. 


e _top: Opens the link in the top-level window, replacing any existing 
frames. 


Select a Background color by clicking the Bg Color swatch and select- 
ing a color from the color palette that appears, or type in a hexadeci- 
mal number. 


Your Flash text appears over the background color you choose. 


Enter a name for your Flash text component in the Save As field or 
click the Browse button to select a name from your files. 


You must save Flash text with an . swf extension. 


Click OK to create your Flash text and close the dialog box. 


To preview the rollover effect of your Flash text, select the Flash object in 


the Document window to open the Flash Text Property inspector. In the 
Property inspector, click the Play button to view your Flash text as it will 
appear in the browser window. Click the Stop button when you’re done. 


Changing Flash text 


You can change an existing Flash text object by simply double-clicking the 
object in the Document window or by clicking the object and then clicking 
the Edit button in the Property inspector. Doing so opens the Insert Flash 
Text dialog box, where you can change various attributes of the object as we 
describe in the previous section. 


Book Il 
Chapter 7 


sanbiuyoe, 
ubisag əfed 
qəM pooueapy 


142 Adding Flash Button Rollovers 


Adding Flash Button Rollovers 


Buttons that change appearance when users move their mouse pointer over 
them — called button rollovers — are so popular that Dreamweaver gives you 
a way to create them quickly and easily as Flash movies. To find out how to 
create button rollovers using images and behaviors instead of Flash button 
rollovers, see the “Inserting Image Rollovers” section, later in this chapter. 
(Book III, Chapter 5 describes how to make rollovers in Fireworks 8 using 
images and behaviors.) 


Adding a Flash button 


To add a Flash button, follow these steps: 


1. Click in the Document window where you want to add a Flash button. 


2. Choose Insert™Media™Flash Button to open the Insert Flash Button 
dialog box, as shown in Figure 7-3. 


Your page must be saved before you can insert a Flash button. If the 
page hasn’t been saved at least once, an alert pops up to remind you to 
save the page so you can insert the Flash button. 








' Insert Flash Button 
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bk Button Text] | Apply 
[cancel 
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[Translucent Tab (down) 
[Translucent Tab ~x 
Button text: See Stars 
Font: | Comic Sans MS v Size: 12 
Figure 7-3: PEA Ea cm 
Add an Target: x 
interactive Bgcolor: [| 
button with Save as: | buttent| swf (Browse...) 
the Insert 
Flash Button 
dialog box. 











3. In the Insert Flash Button dialog box, scroll through the button selec- 
tions in the Style list and click to select a style. 


You can preview the style in the Sample area of the dialog box — just 
point to the sample with your mouse to see the Flash button in action. 
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You can get new Flash buttons on the Macromedia Dreamweaver 8 Web 
site by clicking the Get More Styles button in the Insert Flash Button 
dialog box. A Web page on Macromedia’s site opens in your browser. 
Select the Flash Media option from the Categories drop-down list and 
scroll through the results as needed. 


. If your selected button has a placeholder for text, enter the text that 


you want to appear on the button in the Button Text field. 


Text centers within the button automatically. Button size is fixed, though, 
so you must make sure your text is brief enough to fit on the button. 


5. Select a font for your Flash button text from the Font drop-down list. 


. Enter a point size for your text in the Size field. 


7. In the Link field, enter a URL or the name of the page that you want to 


10. 


11. 


appear when the user clicks the Flash button. 


Alternatively, you can click the Browse button to select a page from your 
files. 


. From the Target drop-down list, select a target window where the 


linked page will appear. 


If you have created frames, you can select a frame name from this list, or 
you can select from the following choices: 


e _blank: Opens the link in a new window. 


e _parent: Opens the link in the parent of the currently opened 
window. 


e _self: Opens the link in the currently opened window; this is the 
default. Leaving the Target area empty produces the same result. 


e _top: Opens the link in the top-level window, replacing any existing 
frames. 


. Select a Background color by clicking the Bg Color swatch and select- 


ing a color from the color palette that appears. 


Alternatively, you can enter a hexadecimal color code in the Bg Color 
field. 


Your Flash button displays with the background color you select. 


Enter a name for your Flash button in the Save As field or click the 
Browse button to select a name from your files. 


The Flash button filename requires an . swf extension. Dreamweaver 
will add the extension automatically if you don’t enter it. 


Click OK to create your Flash button and close the dialog box. 
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ay? To see what a Flash button looks like in action, select the button in the 
Document window to open the Flash Button Property inspector. In the 
Property inspector, click the Play button to view your Flash button as it 
appears in the browser window. Click the Stop button when you finish. 


Changing a Flash button 

To change an existing Flash button object, simply double-click the object in 
the Document window, or click the object and then click the Edit button in 
the Property inspector. Doing so opens the Insert Flash Button dialog box, 
where you can change your button as we describe in the previous section. 


Inserting Image Rollovers 


An image rollover (often just referred to as a rollover) is a behavior that 
changes an image whenever users move their mouse pointer over the image. 
Rollovers add interactivity to a Web page by helping users to see what parts 
of the page are links to other Web pages. 


A rollover is actually two images — one for normal display on a page (the 
original image) and one that is slightly modified for display when the image 
is rolled over (the rollover image). You can modify an image by changing the 
color or position, adding a glow or a shadow, or adding another graphic — 
such as a dog changing from sleeping to wide-awake. For a rollover to work 
best, the normal and rollover states of the image should share the same 
width and height. 
MBER 
& As with all images, you can’t create the original image or the rollover image 
directly in Dreamweaver; you must use an image-editing program, such as 
Fireworks, to generate the images. 


Insert a rollover by following these steps: 
1. Click inside the Document window where you want to insert the 
image rollover. 


2. On the Common category of the Insert bar, click and hold the Image 
button and select Rollover Image from the pop-up menu. 


The Insert Rollover Image dialog box appears, as shown in Figure 7-4. 
Alternatively, you can choose Insert™Image Objects™Rollover Image. 


3. In the Insert Rollover Image dialog box, enter a unique name for the 
rollover in the Image Name field, making sure there are no spaces in 
the name. 
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Figure 7-4: Rollover image: _ ../images/back-btn-ro.gif | Browse... | |help 
Creating an [Z] Preload rollover image 
ry Akernate text: Back 
image ES 
When clicked, Goto URL: | start.html | Browse... 
rollover. er 
sE 
& The rollover is referred to by this name in the HTML page code. Keep 
in mind that this rollover name refers to the combined original image/ Book Il 
rollover image pair. Chapter 7 
4. Enter the name of the original image file in the Original Image field, 
or click the Browse button to select an image from your files. Dn 
-= 
ER . , 4 oo2c 
The original image appears on the page when the user’s mouse pointer al) = 
is not over the image. 2.083 
222 
5. Enter the name of the rollover image file in the Rollover Image field, ae = 
or click the Browse button to select an image from your files. = 
The rollover image appears on the page when the user’s mouse pointer 
is over the image. 
6. Select the Preload Rollover Image check box. 
This feature makes the rollover action appear without delay to users as 
they move the mouse pointer over the original image. It is selected by 
default. 
7. Enter alternate text for the image to make it accessible to vision- 
impaired visitors to your site. 
This step is optional but recommended. 
8. If you want to make the rollover image a link, enter a URL of the page 
in the When Clicked, Go to URL text field. 
Alternatively, you can click the Browse button to select a page from your 
files. 
9. Click OK to accept your choices and close the dialog box. 
ay? To check the rollover, preview your page in a browser by choosing File 


Preview in Browser or by clicking the Preview in Browser button, and then 
use your mouse to point to the original image. You can also press F12 to pre- 
view the rollover in the default preview browser. If you haven’t set a default 
preview browser, you will have to do so using the Preview in Browser cate- 
gory in Dreamweaver’s Preferences dialog box. See Dreamweaver’s help doc- 
umentation for details. 
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Figure 7-5: 
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an entire 
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Up a Navigation Bar 


A navigation bar is a group of buttons that users can access to move through- 
out your Web site. Buttons within a navigation bar may present users with 
options, such as moving backwards, moving forwards, returning to the home 
page, or jumping to specific pages within the site. 


Each button in a navigation bar possesses properties similar to a rollover in 
that the button changes state — or appears differently — based on where the 
user is positioning the mouse pointer. However, a navigation bar button can 
possess as many as four different states: 


+ Up: The original state of the button 


+ Over: How the button appears when a user moves their mouse pointer 
over it 


+ Down: How the button appears as a user is clicking it 


+ Over While Down: How the button appears when the user moves 
their mouse pointer over it after clicking it and arriving on the page it 
represents 


A navigation bar differs from individual rollovers in that clicking a navigation 
bar button in the Down state causes all other buttons in the bar to revert to 
the Up state. 


To create a navigation bar, just follow these steps: 


1. Select the Navigation Bar button from the Common category of the 
Insert bar or choose Insert™Image Objects™Navigation Bar. 


Whichever method you choose, the Insert Navigation Bar dialog box 
appears, as shown in Figure 7-5. 
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. In the Insert Navigation Bar dialog box, enter a name for the first 


button in the Element Name field. 


The new button appears in the Nav Bar Elements field. Don’t use spaces 
in the names of any of these elements. 


. For each state of the button — Up Image, Over Image, Down Image, 


and Over While Down Image — enter the name of the image file that 
you want to use in the associated field. 


Alternatively, you can click the Browse button for each field and select 
an image from your files. You must supply the Up Image. All other states 
are optional and can be left blank. 


You don’t need to use all four navigation bar button states — creating 
only Up and Down states works just fine. 


. Enter alternate text for the image to make it accessible to vision- 


impaired visitors to your site. 


This step is optional but recommended. 


. In the When Clicked, Go to URL text field, enter a URL or the name for 


the page you want to appear when the user clicks the navigation bar 
button. 


Alternatively, you can click the Browse button to select a page from your 
files. 


. From the In drop-down list, select a target window where you want 


the linked page to appear. 


If you aren’t using frames, the only option is to use the Main window. 


. Click the Add Item (+) button to add another navigation bar button. 


Repeat Steps 2 through 6 to format the new button. 


Note: You can remove any button already created by clicking its name in 
the Nav Bar Elements field and clicking the Remove Item (—) button. You 
can also reorder the sequence of the buttons as they will appear on the 
page by clicking a button name in the Nav Bar Elements field and click- 
ing the up or down arrow button. 


. In the Options area, select the Preload Images check box if you want 


the rollover effects to appear without delay when the user triggers 
them. 


. To set the current button to appear in the Down state when the user 


first sees the navigation bar (which you might do to indicate that the 
current page is the one represented by the button), select the Show 
“Down Image” Initially check box in the Options area. 


The Over While Down state works in combination with this option. 
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<e 


10. Select Horizontally or Vertically from the Insert drop-down list to 
position the navigation bar horizontally or vertically. 


11. To set up the button images in a table format, select the Use Tables 
check box. 


This option is checked by default. 
12. Click OK to accept your choices and close the dialog box. 


To check the navigation bar, you must preview your page in a browser. 
Choose File®Preview in Browser or click the Preview in Browser button and 
use your mouse to point to the buttons. 


To change elements of an existing navigation bar, choose Modify>Navigation 
Bar. The Modify Navigation Bar dialog box is nearly identical to the Insert 
Navigation Bar dialog box shown in Figure 7-5, except that you can no longer 
change the orientation of the bar or access the Use Tables check box. 


Adding Audio and Video to Vour Pages 


\NG/ 
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You have two basic options, which are described in detail in the following 
sections, for adding downloadable audio and video to your Web pages: 


+ Embedding: You can embed an audio or video file to display a playback 
console on a Web page that users can use to play, rewind, and fast-forward 
the media file. (You can also embed an audio file and make it invisible to 
create a background audio effect.) 


Users must have an appropriate plug-in installed on their machines to 
play the embedded audio or video file. To ensure maximum compatibil- 
ity, you may wish to use SWFs (check out Book V for more on SWFs) to 
present audio and video. 


+ Linking: You can link to an audio or video file to give users the choice of 
whether or not to view that media file. 


Keep in mind that most audio and video files are large — large enough that 
many folks impatiently click the Stop button on their browsers before a Web 
page chock-full of audio or video effects has a chance to finish loading. Keep 
the following basic rules in mind to help you use audio and video effectively 
in your Web pages: 


+ Use audio and video only when plain text just won’t do. 


+ Keep your audio and video clips as short (and corresponding file sizes 
as small) as possible. 


Figure 7-6: 
Selecta 
media file 
to import. 
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Embedding an audio or video clip 


You can embed an audio or video file by following these steps: 


1. 


2. 


In the Document window, click the location in your page where you 
want to add an embedded audio or video file. 


Click and hold the Media button in the Common category of the Insert 
bar and select Plugin from the pop-up menu, or choose Insert™Media™ 
Plugin. 


The Select File dialog box shown in Figure 7-6 appears. 





URL 





3. 


Select File at 
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Relative to: Document se| index himl 





In the File Name field in the Select File dialog box, enter the path or 
browse to the audio or video file that you want to embed, and click OK. 


If the file is outside your current root directory, Dreamweaver asks 
whether you want to copy the file to your site’s root directory. Click Yes. 


. In the Plugin Property inspector, size the Plugin placeholder to any 


dimensions you prefer. 


You can either enter a width and height in the W and H text fields in the 
Plugin Property inspector, or you can drag a handle on the placeholder 
to manually resize. 


Test in all your target browsers (the browsers your users are likely to 
view your site with) to ensure that users can view all the audio playback 
controls or video area and controls. 


You can click the Play button in the Plugin Property inspector to play your 
media file without previewing your page in a browser. 
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Embedding background music 

Embedding background music (music that plays automatically after the 
user Opens a page) in your page can be controversial because users may 
be unpleasantly surprised by audio when they are expecting silence, and 


because users have no way to turn off the music from within the browser. If 
you still want to embed background music in your page, follow these steps: 


1. 


In the Document window, click the location in your page where you 
want to add an embedded audio file. 


This should be an out-of-the-way location, like the bottom of your page, 
so the embedded audio doesn’t create an awkward space in your design. 


. Click and hold the Media button in the Common category of the Insert 


bar and select Plugin from the pop-up menu, or choose Insert~>Media™ 
Plugin. 


The Select File dialog box appears. 


. In the File Name field in the Select File dialog box, enter the path to 


the audio file that you want to embed, and click OK. 


If the file is outside your current root directory, Dreamweaver asks 
whether you want to copy the file to your site’s root directory. Click Yes. 


. Enter a width and height of 2 in the W and H text fields in the Plugin 


Property inspector. 


5. Click the Parameters button to open the Parameters dialog box. 
6. In the Parameters dialog box, click the Add (+) button to add a new 


parameter. 


. Click in the Parameter column and type hidden. 


8. Type true in the Value column. 


Steps 7 and 8 hide the audio playback controls. 


. Click OK to complete the process and close the dialog box. 


Linking to an audio or video clip 


A simple and relatively trouble-free way to include audio and video clips ona 
Web page is to link the page to an audio or video file. Users can click the link 
if they want to hear or watch the clip. This selection opens a player outside 
the browser where the user can control playback. 


You follow the same steps to create a link to an audio or video file that resides 
in your root folder as you do to create a link to a Web page (see Book II, 
Chapter 2); the only difference is that you specify a media file instead of a 
URL for the link. 


Adding Other Media 


Dreamweaver enables you to easily insert a number of other multimedia for- 
mats into your Web pages, including ActiveX, Java Applets, Macromedia 
Flash, and Shockwave. After inserting any of these media formats, you can 
set the control and playback features of the media in the Parameters dialog 
box. Additionally, you can fine-tune the media action on your page by using 
the Behaviors panel to create triggering actions that cause the media to play, 
stop, and execute other functions. 
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Adding Other Media 


Follow these directions to insert other media: 


1. In the Document window, click the location in your page where you 
want to add a multimedia file. 


2. Click and hold the Media button in the Common category of the 
Insert bar to view all the object types that you can insert, as shown 
in Figure 7-7, and click the icon of the type of media file you want 


to insert. 


Alternatively, you can choose Insert™Media™Media Type, where Media 
Type is the type of media file you want to insert. 


The Select File dialog box appears. 
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e For Applet, Macromedia Flash, and Shockwave files: In the File 
Name field in the Select File dialog box, enter the path to the media 
and click OK. Your file is inserted and the associated Property inspec- 
tor appears. You can change the selected file in the Plugin Property 
inspector by typing a new name in the File text field or by browsing 
in the File folder to select a file (for Applets, use the Code text field). 
Select the Embed check box if you want Netscape Navigator users to 
have access to the Applet. 


e For ActiveX: An ActiveX placeholder is inserted and the ActiveX 
Property inspector appears. Enter the name of the ActiveX object 
you want to play in the Class ID text field. Select the Embed check 
box if you want Netscape Navigator users to have access to the 
ActiveX object. 


3. In the Property inspector for your selected media, enter dimensions 
in the W and H text fields to size the Media placeholder to any dimen- 
sions you choose. 


4. In the Property inspector for your selected media, click the Parameters 
button to open the Parameters dialog box, where you can add parame- 
ters (like width, height, loop, and autoplay) appropriate to the selected 
media type. 


Using Dreamweaver 8 Templates 


Dreamweaver comes with many built-in layouts that you can use to create 
pages or Dreamweaver templates quickly. The layouts are predesigned pages 
with placeholder content. Make a new page from a layout, replace the place- 
holder content with real content, and voila — a professionally designed page! 


To create a new page based on a built-in layout, just follow these steps: 


1. Choose File>New. 
The New Document dialog box appears. 
2. Select Page Designs in the Category list on the left. 


The Page Designs appear in the middle column. Click any one to see a 
preview in the Preview area, as shown in Figure 7-8. 


3. When you’ve found the layout you want, select the Document option 
in the lower-right corner and click the Create button. 


An untitled HTML page opens in the Document window with placeholder 
content that you can replace with real content. 


If you wanted to create your own template based on the built-in layout, 
you could select the Template option in the lower-right corner of the 
New Document dialog box. 





Figure 7-8: 
The 
Commerce: 
Product 
Details 
layout is 
selected. 
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You don’t have to use a built-in layout to create a Dreamweaver template: 
You can make a Dreamweaver template based on any Web page. One cool 
thing about Dreamweaver templates is that if you make a whole bunch of 
pages based on a template, you can change the template, and all the pages 
based on it will be updated to match the template automatically. Another 
cool thing is that you can make a template that other people can use in com- 
bination with either Dreamweaver or Contribute to create new pages that 


conform to the template’s design. 


To create a Dreamweaver template based on an existing HTML page, just 
follow these steps: 


1. Choose File>New. 


The New Document dialog box appears, with the General tab selected. 


2. Select Basic Page from the Category list on the left and then select 
HTML Template from the list of Basic Pages that appears in the middle. 


You can also select Template Page from the Category list and choose 
HTML Template from the Template Page list that appears in the middle. 


3. Create your page layout. 


By default, nothing in the design of pages based on your template is 
editable. You must create editable regions in order to make a useful 


template. 
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4. Click a table cell or other part of your layout that you want users to be 
able to fill with content, and choose Insert>Template Objects>Editable 
Region, or use the keyboard shortcut Ctrl+Alt+V. 


The New Editable Region dialog box appears. If you have a placeholder 
image already in the layout, you can right-click the image and choose 
Templates™New Editable Region from the context menu that pops up, or 
you can select the image and use the keyboard shortcut Ctrl+Alt+V. 


5. Name the region and click OK. 


You can use the default name Dreamweaver gives to the region, but it’s 
better if you name the region to reflect the content that will go into it 
(for example, name the region Product Description). Figure 7-9 shows a 
template with three editable regions. Editable regions are bound by a 
light blue box with the region name at the top left. 
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6. Repeat Steps 4 and 5 until you have made editable regions out of all 
the areas of the page that you want to be editable in new pages based 
on the template. 
MEE 
& Anything inside an editable region can be replaced in a page based on 


the template; anything outside the editable regions is locked and can’t 
be changed in pages based on the template. 


7. Choose File™Save. 
The Save As Template dialog box appears. 


8. Choose the site the template belongs to from the drop-down list, enter a 
name for the template in the Save As field, and click the Save button. 


Figure 7-10: 
Creating a 
new page 
based ona 
template. 
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The template will now be available to anyone who has access to the 
Dreamweaver site, either through Dreamweaver or with Contribute. 


You may turn any existing page into a template. Choose File™Save as 
Template when the page is open. If you try to close the template without 
having created editable regions (as described in the previous steps), 
Dreamweaver gives you a warning message saying that the template does 
not contain any editable regions. Click OK to close the warning dialog box, 
create the editable regions in your template, and choose File™Save to save 
your template. 


To create an HTML page based on an existing user-created template, follow 
these steps: 


1. Click the Templates icon in the Assets tab of the File panel. All avail- 
able templates for the selected site appear. 


If the Files panel is closed, choose Window™<Assets or use the keyboard 
shortcut F11. 


2. Right-click the template you want to create the new page from and 
choose New from Template, as shown in Figure 7-10. 


The page opens as an HTML page in the Document window. 
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Figure 7-11: 


The 
Templates 
tab of the 
New 
Document 
dialog box. 


You can also create an HTML page based on a user-created template by 
choosing File*New and choosing the template from the Templates tab of the 
New Document dialog box. (When you select the Templates tab, the dialog 
box’s title bar changes to read New from Template and the Templates options 
appear, as shown in Figure 7-11.) 
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Validating Vour Code 


Dreamweaver 8 has a built-in code validator. The validator checks your 
HTML for errors (for example, unclosed <TD> tags or tags with invalid attrib- 
utes, such as <FONT width=113>). If you work exclusively in Design view, 
you may never need to use the validator. If you work in Code view, though, 


and you are creating long, complex pages, you may find it worthwhile to run 
the validator. 





To validate your code (unless it’s XML), choose File®Check Page™Validate 
Markup. The Results panel opens and shows a list of warnings for any faults 
in the code. 


To validate XML code, choose File™Check Page™Validate as XML. Because 
XML has stricter requirements for well-formed code, you should take advan- 
tage of Dreamweaver’s built-in validator if you’re writing XML or XHTML. 


Chapter 8: Integrating 
Dreamweaver 8 with Other 
Macromedia Products 


In This Chapter 


Integrating Dreamweaver with Fireworks 
Integrating Dreamweaver with Macromedia Flash 
Integrating Dreamweaver with ColdFusion 
Integrating Dreamweaver with FreeHand 


Integrating Dreamweaver with Contribute 


UY the release of the Macromedia Studio MX 2004 suite, Macromedia 
brought Fireworks, Flash, Dreamweaver, ColdFusion, Contribute, 
and FreeHand closer together than ever before. Macromedia Studio 8 con- 
tinues this tradition of integration. The applications in the suite have 
complementary — and in some cases overlapping — capabilities. 


In order to take advantage of Dreamweaver’s integration with Fireworks and 
Flash, you need to make sure Design Notes are enabled. Design Notes are 
Macromedia Studio’s way of tracking changes and establishing links between 
exported files (such as GIFs or JPEGs) and their source files (Fireworks PNG 
files, for example). 


By default, Design Notes are enabled when you establish a new Site. If you 
disabled them and wish to re-enable them, just follow these steps: 
1. In Dreamweaver, choose Site™Manage Sites. 
The Manage Sites dialog box appears. 
2. Select the site by clicking it. 
If you have a site open already, that site is already selected. 
3. Click the Edit button. 


The Site Definition dialog box opens. 
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Figure 8-1: 
Enabling 
the Maintain 
Design 
Notes option 
in the Site 
Definition 
dialog box. 





4. If the Site Definition dialog box opens with the Basic tab selected, 
click the Advanced tab. 


The Advanced options appear. 
5. Select Design Notes in the Category list. 
The Design Notes options appear. 
6. Select the Maintain Design Notes check box, as shown in Figure 8-1. 


The Maintain Design Notes option is selected by default, but it can be 
toggled on and off in the Site Definition dialog box. 
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7. If you’re working on the site with others, make sure the Upload 
Design Notes for Sharing check box is selected. 


The Upload Design Notes for Sharing option uploads your Design Notes 
so that other people working on the site can have access to them. If 
you’re the only person working on a site, you should deselect this 
option to speed file transfers. 


8. Click OK. 
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Disabling Design Notes is simple: Just follow the preceding steps, but in 
Step 6, deselect the Maintain Design Notes check box. 


With Design Notes enabled, you can move seamlessly back and forth between 
Dreamweaver and the other applications in the Macromedia Studio suite. 


Integrating Dreamweaver with Fireworks 


Fireworks is a Web design tool and Dreamweaver is an HTML editor, so you 
may expect that the two applications complement each other well. In fact, 
the two programs make a dynamite tag team. Book Il 
Chapter 8 
The phrase Roundtrip HTML refers to the basic interaction between Fireworks 
and Dreamweaver. Essentially, if you generate your HTML in Fireworks and 
edit the code in Dreamweaver, Fireworks recognizes the changes you make 
in Dreamweaver. That goes for links, image maps, behaviors shared by both 
programs, and edited HTML text. If you make radical changes to the overall 
design of the page in Dreamweaver, however, Fireworks may not be able to 
reconcile the HTML with the Fireworks PNG source file. In those cases, 
Fireworks will overwrite your changed code with new code. 


g Janeamwiesig 
Hunesajuy 


In order to take advantage of Roundtrip HMTL, you need to establish a few 
settings, both in Dreamweaver and in Fireworks. In Dreamweaver, you need 
to define a local site (see Book II, Chapter 3) and make Fireworks your pri- 
mary image-editing application. To find out how, read the next section. 


Making Fireworks your primary image editor 

If you installed Dreamweaver along with the rest of Macromedia Studio, 
Fireworks is your primary image-editing application by default. However, if 
you changed that default setting, here’s how to return to the setting of 
Fireworks as your primary image-editing application: 


1. In Dreamweaver, choose Edit Preferences or use the keyboard short- 
cut Ctrl+U. 
The Preferences dialog box appears. 

2. Select File Types/Editors in the Category list. 


The File Types/Editors options appear in the Preferences dialog box, as 
shown in Figure 8-2. 


3. Select the .png extension in the Extensions list. 


The extension is highlighted. 
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Figure 8-2: 
The Dream- 
weaver 
Preferences 
dialog box. 
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. Click the plus (+) button above the Editors list. 


If Fireworks is already listed in the Editors list, you don’t need to click 
the plus (+) button. 


. If you need to add Fireworks to the Editors list, navigate to 


Fireworks .exe on your hard drive and double-click it. 


If Fireworks is now the only application listed in the Editors area, it’s the 
primary editor by default (Primary is in parentheses next to Fireworks). 


. If you have more than one image editor in the Editors list, select 


Fireworks in the list and click the Make Primary button. 


. Repeat Steps 3 through 6 for the .gif, . jpg, . jpe, and . jpeg 


extensions. 
Click OK. 


You may need to set a few preferences in Fireworks as well. See Book III, 
Chapter 8 for information on how to set Launch and Edit preferences in 
Fireworks. 


Working with tables 


Taking advantage of Roundtrip HTML means more than just setting prefer- 
ences: You also need to know which application is best to use for particular 
types of changes. If you originally exported your HTML from Fireworks and 
wish to make major structural changes to the table that constitutes your 
HTML page, we recommend that you modify your original Fireworks PNG 
source file and re-export the HTML from there rather than using Dreamweaver 
to modify the code. Using Fireworks to change the table structure ensures 
that the slices in your Fireworks PNG source file will correspond to the cells 
in your HTML table. 


\NG/ 
> 
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Here’s how to edit a table in Fireworks (provided the table was created when 
you exported your page design as HTML from Fireworks) by launching it 
from within Dreamweaver: 


1. Select the table in Dreamweaver. 
The Property inspector updates to display the parameters of the table. 
2. Click the Fireworks Edit button in the Property inspector. 


If need be, you can navigate to the source Fireworks PNG file from within 
the Dreamweaver Property inspector. The source file opens in Fireworks. 


3. Make edits to the slices or guides as necessary. 
4. Click the Done button when youre finished editing. 


The Fireworks window closes, and Dreamweaver updates the table and 
images. 


When you launch and edit a table in Fireworks, it may overwrite some 
changes you may have made to the table structure in your Dreamweaver 
code if the changes you made in Dreamweaver are substantial. A warning 
notifies you when Fireworks will overwrite the existing Dreamweaver edits. 


When you want to leave the table structure intact but need to rename or 
reoptimize an image, you can launch Fireworks from a selected image rather 
than a selected table. Editing a JPEG image from its Fireworks PNG source 
file rather than editing and resaving the already optimized image ensures the 
highest image quality. 


To launch and edit a PNG source file from an optimized image placed in 
Dreamweaver (to change graphic text in a JPEG image, for example), follow 
these steps: 


1. Click the optimized image in the Dreamweaver Document window. 
The Property inspector updates to display image parameters. 


2. Click the Fireworks Edit button in the Property inspector, as shown 
in Figure 8-3, or right-click the optimized image and choose Edit with 
Fireworks from the context menu that appears. 


If Dreamweaver cannot locate the source Fireworks PNG file, you’re 
prompted to navigate to the source file. When you do, the source PNG 
file opens in Fireworks. At the top of the Fireworks canvas, the words 
“Editing from Dreamweaver” show that Roundtrip HTML is in effect. 


Notice at the top left of the Property inspector that the Fireworks icon 
and the designation FW Image identify the selected image as one cre- 
ated in Fireworks. Note also the Fireworks Src text field at the bottom 
middle of the Property inspector, which shows the path and name of the 
source Fireworks PNG file. 
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3. Edit the image within the context of your overall page design. 


The new version of the image will be exported at the specified settings, 
which you may leave as is or change before clicking Done. 


4. Click the Done button at the top left of the canvas. 


The Fireworks window minimizes. When you look at the Document 
window in Dreamweaver, you see the new image. 


You can also launch and edit a GIF or JPEG image directly in Fireworks, though 
it’s always best to edit from the source PNG when possible, both to preserve 
image quality and to keep your source file in sync with your Web page. If you 
don’t have a source PNG (or don’t need to keep your source design file up to 
date) and you just want to tweak an image without changing its width and 
height, you can do so easily as follows: 


1. Double-click the image’s filename or corresponding icon on the Files 
tab or Assets tab of the Files panel. 
Fireworks launches and your image appears on the canvas. 

2. Make changes to the image. 


3. Export the updated GIF or JPEG from Fireworks by choosing File 
Export or by using the shortcut command Ctrl+Shift+R. 


If necessary, navigate to the folder in which you keep the optimized 
images for your site. A prompt warns you that the file already exists. 
Click OK to replace the existing file. 


4. Close the file in Fireworks. 


When you close the file in Fireworks, an alert asks if you want to save 
changes to your file. If you want Fireworks to save the file as a PNG, click 
Yes. Otherwise, click No. 


You can add a Fireworks-generated table to an open Dreamweaver document 
whether the document is blank or has code already in it: 
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1. Choose InsertImage Objects>Fireworks HTML. 
The Insert Fireworks HTML dialog box appears. 


2. Type the pathname or click the Browse button and browse to the 
Fireworks HTML file. 


If the HTML file you select was not generated by Fireworks, an alert 
informs you and you won’t be able to insert the HTML. 


3. Select the Delete File after Insertion check box if you don’t need to 
save the Fireworks-generated HTML. 


Unless you want a backup copy of the HTML free from any edits you 
might make in Dreamweaver, you can safely delete it. Book II 


4. Click OK. Chapter 8 


If you want to nest tables but still use Roundtrip HTML, one way to do it is to 
make a large table in Dreamweaver and insert Fireworks-generated tables in 
the cells. Then, if you need to change one of the inserted tables, you can 
select the table and edit it in Fireworks. 
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Integrating Dreamweaver with Macromedia Flash 


Thanks to Dreamweaver’s Flash commands, you can create Flash buttons 
and Flash text without actually having Macromedia Flash installed on your 
computer. If you’ve installed Macromedia Studio, though, you’ll probably 
prefer to create Flash movies in Macromedia Flash and let Dreamweaver 
write the code to embed Flash SWF files in your HTML pages. 


Inserting a Flash movie into 
a Dreamweaver document 


Inserting a Flash SWF movie into a Dreamweaver document is easy. Dream- 
weaver offers easy access to many parameters of SWF movies directly from 
the Property inspector, though you can’t edit a Flash SWF movie from within 
Dreamweaver. 


To insert an SWF file into an existing Dreamweaver HTML document, follow 
these steps: 
1. Click the spot in the page where you want the Flash movie to go. 


2. Choose Insert~Media™Flash (or use the keyboard shortcut Ctrl+Alt+F) 
or click and hold the Media button in the Common category of the 
Insert bar and choose the Flash icon. 


The Select File dialog box appears. 
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Figure 8-4: 


The Dream- 


weaver 
Property 
inspector 
for SWF 
movies. 


3. Navigate to the SWF file and double-click it or click it once and 
click OK. 


You can type the name of the file in the File Name text field instead, if 
you prefer. The Select File dialog box closes and your SWF movie is 
placed where the cursor was last active. 


Working with the Property inspector 


When an SWF file is selected in the Document window, the Dreamweaver 


Property inspector (shown in Figure 8-4) gives you access to many parame- 
ters for the display of the movie, including 


+ Width and Height: Unless specified otherwise here in the W and H 
fields, the SWF will display at the dimensions you set in Macromedia 
Flash’s Document Properties dialog box. 


+ Loop: You can toggle looping on or off by selecting or deselecting this 
check box. 


+ Autoplay: You can toggle autoplay on or off by selecting or deselecting 
this check box. When Autoplay is selected, the SWF starts automatically 
when the HTML page loads in the user’s browser window. 


+ V Space and H Space: As with GIFs and JPEGs, you can set the vertical 
and horizontal spacing to provide margins between SWFs and other con- 
tent that occupies the same table cell. 
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+ Quality: This drop-down list offers four options: High, Auto High, Auto 
Low, and Low. The Low option sacrifices image quality to increase 
smoothness in the flow of the animation. 


+ Scale: This drop-down list gives you three choices: Show All, No Border, 
and Exact Fit. 


+ Align: This drop-down list offers access to all the options for aligning 
the SWF within a table cell. 
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+ Background color (Bg): A background color chosen here overrides the 
background color as set in Macromedia Flash’s Document Properties 
dialog box. 


The Property inspector also includes some other handy tools: 


+ The Flash Edit button: This button opens the source FLA file in the 
Macromedia Flash application. 


+ The Reset Size button: This button restores the SWF to its original 
dimensions. 


+ The Play button: This button allows you to see the SWF file in action 
without opening the page in a browser window. 


+ The Parameters button: This button allows you to customize parame- 
ters passed to the SWF. 


The Flash Edit button in the Property inspector is grayed out if you do not 
have Macromedia Flash installed on your computer. When you want to edit 
an SWF, you need to go back to the FLA source file to make your changes and 
then re-export the SWF. This is true except when changing a link in an SWF 
file, in which case Dreamweaver adds a Design Note to pass the new link to 
the FLA source movie when you next launch and edit the FLA. 


Editing a Flash movie in Dreamweaver 


To edit a Flash movie from within Dreamweaver, just follow these steps: 


1. Select the SWF file by clicking it in the Dreamweaver Document 
window. 


The Property inspector updates to display the Macromedia Flash param- 
eters. (Refer to Figure 8-4.) 


2. Click the Edit button in the Property inspector. 


If necessary, navigate to the FLA source file in the Locate Macromedia 
Flash Document File dialog box and double-click the FLA file or click it 
once and then click the Open button. 


The source file opens in Macromedia Flash. The designation “Editing 
from Dreamweaver” confirms that Macromedia Flash was launched from 
within Dreamweaver. 


ag 


Edit the Flash movie source file. 
Click the Done button at the top left of the Flash stage. 


> 


Macromedia Flash exports an updated SWF file to the proper directory, 
saves the FLA file to its current directory, and closes. The new SWF file 
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appears in the Dreamweaver Document window. If you changed the 
dimensions of the Flash movie, click the Reset size button to update the 
Dreamweaver code. 


Editing a link in an SWF file in Dreamweaver 


Editing a link in an SWF file is similar to editing a Flash movie, but you need 
to set up a few things beforehand: 


+ Establish a home page and dependent pages in the Site Map. 
+ Set the Site Map to display dependent files (as in Figure 8-5). 


See the Dreamweaver Help files for details on setting up a Site Map. 
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After you’ve done that, you can change a link in an SWF by following these 
steps: 


1. Right-click the link displayed under the SWF file in the Site Map and 
choose Change Link from the context menu. 


The Select HTML File dialog box appears. 


<r 
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2. Navigate to the file to which you want to link and double-click it, or 
type a URL into the URL text field. 


3. Click OK. 


You can also update a link in an SWF file while updating the same link in 
other files by choosing Site®Change Link Sitewide and inputting the old and 
new links in the Change Link Sitewide dialog box that appears. Whether you 
change the link only in the SWF file or in an SWF file as part of a sitewide 
update, the FLA source file will not be updated until you launch and edit the 
SWF from Dreamweaver. 


Integrating Dreamweaver with ColdFusion 


Dreamweaver fully absorbed ColdFusion in the sense that Dreamweaver 
became the working environment for ColdFusion. In Book VII, we describe 
how to set up your ColdFusion server as well as concepts in programming; 
Book VII, Chapter 4 offers the information you need to write CFML 
(ColdFusion Markup Language) using Dreamweaver. 


Integrating Dreamweaver with FreeHand 


Though you can publish FreeHand documents as HTML (complete with 
embedded SWF movies, URL links, and Flash actions), FreeHand is not as 
tightly integrated with Dreamweaver as Fireworks is. 


FreeHand is primarily a print-oriented design application, so it’s no surprise 
that it lacks the kinds of controls Fireworks offers for image slicing and 
optimization. 


In other words, if you’re designing for the Web, you'll find Fireworks a much 
better tool (not in the least for its solid integration with Dreamweaver). None- 
theless, if you ever find yourself with an HTML file published by FreeHand, 
rest assured that you can open and edit that file in Dreamweaver, as you can 
with an HTML file created in any application. 


Integrating Dreamweaver with Contribute 


From the beginning, Contribute was built with Dreamweaver in mind. Now 
with the release of version 2.0, Contribute has become more integrated with 
the Macromedia Studio suite — and Dreamweaver in particular — than ever. 
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See the section on enabling Contribute compatibility in Book V, Chapter 3 for 
a quick discussion of what to do if you haven’t yet built your site and want 
others to maintain it using Contribute. 


If you’ve built a site already and want to be able to administer it without 
leaving Dreamweaver, just follow these steps: 


1. 


9a. 


9b. 


Choose SiteManage Sites. 
The Manage Sites dialog box appears. 


. Select the site you want to administer and click Edit. 


The Site Definition dialog box appears. 


. Click the Advanced tab. 


The Advanced options become available. 


. Click Contribute in the Category list. 


The Contribute options load in the main part of the dialog box. 


. Select the Enable Contribute Compatibility check box if it’s not 


already selected. 


If you haven’t enabled Design Notes and Check In/Out, a dialog box 
appears to alert you to that fact. Click OK to enable them. The 
Contribute Site Settings dialog box appears. 


. Enter your name and e-mail address in the Site Settings dialog box 


and click OK. 


The dialog box closes and new options appear in the Contribute page of 
the Site Definition window. 


. Enter the remote site root URL (for example, http: //www.loungeboy. 


com) in the Site Root URL text field, if it’s not already there, and click 
the Test button. 


Dreamweaver confirms the URL is accurate by connecting to the site. 


. Click the Administer Site in Contribute button. 


Either the Administrator Password dialog box appears, or, if there’s no 
administrator for the site yet, a Contribute dialog box appears that asks 
if you want to be the administrator for the site. 


If the Administrator Password dialog box appears, enter the password 
and click OK. 


If the Contribute dialog box appears, asking if you want to be the 
administrator (and you do want to be the administrator), click Yes. 





Figure 8-6: 
The 
Administer 
Website 
dialog box. 
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The Administrator Password dialog box appears. Enter a password in 
the New Password text field and re-enter it in the Confirm New Password 
text field below. Then click OK. Note that passwords are case-sensitive. 
(if the Contribute dialog box appears and you don’t want to be the 
administrator, click No.) 


Contribute opens in the background and the Administer Website dialog 
box appears, as shown in Figure 8-6. 





Administer Website - changenoteasst - changenoteassistant... =] 


Sitewide settings 
v These settings apply to al Contribute users edting pages on your website. 
E A) 


Sitewide Settings.. 
Permission groups 


éal Peimission groups limit what Contribute users can do on your website. To 
$ restrict a user to a specific croup, send a connection key to the user. 





Administrator | Edit Group... 
Users Se 
| New... 
- Duplicate. 
Delete 
Set up users 


You can send users a file called a connection key that automatically sets 
PA upa Contribute connection. The connection key restricts those users to a 
specific permission group. 


[_Send Connection Key... | 

















Help [ OK J Cancel 





10. Make any changes to the Administer Website settings and click OK. 


The Administer Website dialog box closes, and Contribute closes. For 
information on the Administer Website options, see Book V, Chapter 3. 


11. Click OK in the Site Definition dialog box. 

12. Click Done in the Manage Sites dialog box. 

For more information on creating new pages in Contribute based on 
Dreamweaver templates, see the section on creating a new page in Book V, 


Chapter 2 and the section on using Dreamweaver templates in Book II, 
Chapter 7. 
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Chapter 1: Introduction 
to Fireworks 8 


In This Chapter 


Understanding the power of Fireworks 8 
Touring the Fireworks 8 interface 
Checking your work over with a preview 
Creating a customized work environment 
Setting your preferences 


Getting help when you need it 


[rron 8 is the latest version of a graphics creation and editing pro- 
gram designed to streamline the process of making images for the Web. 
In the days before the original version of Fireworks, making graphics for the 
Web could be a frustrating and time-consuming process of trial and error. 
Not only that, but the results often looked pretty bad. 


With products like Fireworks, all that has changed. This chapter gives you 
a brief introduction and tour of the product and shows you how to set up 
Fireworks to fit your working style. 


Understanding the Power of Fireworks 


You can divide the basic process of making graphics for a Web site into two 
major parts: 


+ Creating the images: Drawing, importing, and manipulating pictures, as 
well as designing the overall page layout on the Fireworks canvas 


+ Optimizing the images: Slicing the page layout into pieces, selecting the 
proper compression format and level for each piece, and exporting the 
individual pieces 


Fireworks has two different tools that make the process of creating graphics 
for a Web site easier: layers and slices. Layers are a mainstay of graphics 
development tools, such as Photoshop and FreeHand, and animation pro- 
grams, such as Macromedia Flash. Layers make creating and editing graphics 
a simpler proposition. Slices, first introduced by Macromedia in the original 
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version of Fireworks, offer an efficient way to divide a design into individually 
optimized Web graphics. You can read more about both layers and slices in 
the following sections. 


Making designing easier with layers 
We discuss layers in more detail in Book III, Chapter 5, but this section serves 
as an introduction to the benefits of layers. 


Layers act like transparent sheets that you can stack, one on top of the other. 
You draw a separate element of the image on each transparency. Any area 
where you haven’t put something remains transparent, so layers beneath 
show through. In a typical file, you may have several text layers and many 
layers of backgrounds, icons, lines, shapes, and so on. 


If you ever make mistakes or change your mind about overall layout, text, or 
graphical elements, layers can save you a lot of time as you design your site. 
Suppose that you’re doing calligraphy and illustration on fine paper. If you 
mess up one part of the image, you often ruin the whole thing because you 
only have one layer to work with — the paper. Short of cutting a piece out of 
the paper, you probably can’t delete your mistakes. Layers offer a practical 
approach to fixing your errors. 


Using layers provides many benefits. Some of the most practical advantages 
include the following: 


+ You can change any element of your design — text, bitmap, or vector 
shape — without altering or destroying any other element. 


+ You can apply effects to layers that are grouped together, decreasing the 
amount of time it takes to edit an image. (Of course, you can also apply 
effects to individual layers.) 


+ You can easily move elements up and down in the stack of layers to 
change the visual effect on the screen. 


+ You can test new designs and effects in a snap because you can very 
easily hide and show elements of an image. 


Creating slices 


We discuss slices in more detail in Book III, Chapter 6, but here’s an introduc- 
tion to the concept of slices. Imagine for a moment that you’ve created your 
masterpiece design for a new Web site. Your Fireworks file may include a lot 
of different kinds of imagery, including the following: 


+ Animations 


+ Drawings 





Figure 1-1: 
The Web 
layer and 
slices. 
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+ Header graphics, such as banners 
+ Logos 

+ Navigation buttons 

+ Photos 


Before you can create your Web page, you have to get all of these graphics 
into a Web-friendly format, which is where slices come in. The idea is simple 
and elegant: Include a special layer in the program that no one can ever 
remove, where you can create guides as to how you want the images to be 
“sliced” up into separate, individually optimized, and hyperlinked images. 
Figure 1-1 shows that special layer, called the Web layer, and some slices in 
action. 
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Slices provide some key advantages over outmoded methods of creating 
images for the Web: 


+ You can slice a design into more than one image at a time. 


+ You can export multiple files in a single procedure. 
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+ You can control exactly where images are sliced, which helps prevent 
you from making images with overlapping areas. 


+ You have an increased ability to optimize image size (and thereby reduce 
download time) by selecting the best optimization method for each slice. 


Slices guarantee that the layout of your Web page appears nearly identical 
on every user’s screen to the design that you create in Fireworks. (If you have 
HTML text on your page, the appearance of that text may vary, depending on 
which browser and platform the user views your page with.) 


Taking a Quick Tour of the Fireworks 8 Interface 


The Fireworks interface is set up to make accessing the tools quick and 
intuitive. When you start Fireworks, it doesn’t create a new document 
automatically — instead, you see the Start Page, as Figure 1-2 shows you. 
From the Start Page, you get one-click access to 


+ Create New: Click the Fireworks File link to open a new, blank image. 


+ Extend: Click the Fireworks Exchange link to browse to a part of the 
Macromedia Web site that includes a lot of free, cool, downloadable 
tools and graphical elements created by users like you. 
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+ Open a Recent Item: Just click the filename, or click the Open folder and 
browse to a file to open the image in Fireworks. 


+ Information: Click the Take a Quick Tour of Fireworks link or the Learn 
About Documentation Resources link to view basic tips and tutorials. Or 
click the link to the Fireworks Developer Center, where you can find tuto- 
rials, sample files, and feedback from other Fireworks users. 


If you don’t want the Start Page to show up every time you launch Fireworks, 
click the Don’t Show Again check box at the bottom-left corner of the page. 


To create a new Fireworks file (called a PNG file), just follow these steps: 


1. Choose File™New, or click the Fireworks File link on the Start Page. 
The New Document dialog box appears. 


2. Choose the canvas size for your document in the New Document 
dialog box. 


The default width and height are 660 x 440 pixels (or the dimensions of 
the previous file that you created in Fireworks), and the default resolu- 
tion is 72 pixels per inch. You can enter your own size in the fields pro- 
vided and change the unit of measurement by selecting one from the 
drop-down list. Leave the resolution at 72 pixels per inch unless you’re 
designing for some medium other than the Web, like print. 


3. Select a color for the canvas. 


The default canvas color is white, but you can choose a custom color 
by selecting the Custom radio button and then using the eyedropper to 
choose a color from the color picker. You can also choose to have a 
transparent background by selecting the Transparent radio button. 


4. Click OK to create your new Fireworks document. 


When you click OK, your screen looks a lot like Figure 1-3. 


The Tools panel: A bird’s-eye view 


The panels along the left side of the screen are parts of the Tools panel, which 
provides access to all the tools that you use to make and modify your graph- 
ics. The Tools panel divides tools into groups based on their function: 


+ Select: Contains tools used to select an object, as well as tools used to 
crop or otherwise manipulate the canvas. 
+ Bitmap: Stores tools used to paint, draw, fill, and so on. 


+ Vector: Contains tools used to create and manipulate vector graphics. 
(See Book VI, Chapter 1 for more on vector graphics.) 
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Figure 1-3: 
The default 
Fireworks 8 
interface. 
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+ Web: Holds tools, such as the Slice tool, that are designed specifically 
for getting images ready for the Web. 


+ Colors: Stows away tools that control the color(s) of objects. 


+ View: Holds tools that you can use to change your view of the canvas or 
the screen. 


An arrow at the lower-right corner of a tool’s icon indicates that the tool has 
one or more specialized variations. You can click the arrow to activate a pop- 
up menu that displays icons for the available variations. 


The Tools panel: A bug’s-eye view 


This section gives you the lowdown on the tools that you probably use the 
most in the Tools panel. An arrow at the bottom right of the tool icon indi- 
cates there are related tools available. Click the icon or the arrow to activate 
a pop-up menu so that you can choose from all the available tools. When you 
select a tool, you can also cycle through the related tools by pressing certain 
keys on your keyboard (for example, select the Marquee tool and press M to 
toggle through the Marquee tool options). The Tooltip for each tool includes 
the key that you can press to cycle through the options on the tool. 
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You get to see the tools in action in later chapters, but for now, here are the 
highlights for each of the four key categories of drawing tools: 


+ Select: The following four tools (clockwise from top left) make up the 
Select section of the Tools panel: 


Pointer/Select Behind tool: Use the Pointer tool to select objects on 
the canvas by clicking them or clicking and dragging an area that 
encompasses them. Use the Select Behind tool when you want to 
click an object on the canvas that other objects cover. 


Subselection tool: Use the Subselection tool to select an individual 
object from a group. 


Crop/Export Area tool: Click the Crop tool and click-and-drag to 
select an area on the canvas to crop an image. When you crop an 
image, you discard everything outside the selected area from your 
image. After you have selected the area that you want to keep, 
double-click inside the area to crop. Use the Export Area tool to 
create a new image from the area that you select. After you have 
selected the area you want to export, double-click inside the area to 
bring up the Export Preview window. 


Scale/Skew/Distort tool: This tool is inactive (as indicated by the 
dimmed icon) until you select an object on the canvas. Click this tool 
and click and drag the transform handles at the corners of the object 
to change its size and/or shape. 


+ Bitmap: The following ten tools (clockwise from top left) make up the 
Bitmap section of the Tools panel: 


Marquee/Oval Marquee tool: Click the Marquee tool and click and 
drag to select a rectangular area on the canvas. If you want to select 
a circle or oval area, use the Oval Marquee variation. When you select 
an area, you select all objects that fall completely within the area. 


Lasso/Polygon Lasso tool: Click the Lasso tool and click and drag on 
the canvas to select everything within an irregularly shaped area of 
the canvas. If the shape you want to select is made up of straight 
lines, use the Polygon Lasso. 


Brush tool: Click this tool to paint on the canvas. See Book III, 
Chapter 3 for more information about the very versatile Brush tool. 


Eraser tool: Click the Eraser tool to erase a swath through any 
bitmap object on the canvas. 


Rubber Stamp/Replace Color/Red Eye Removal tool: Click this tool 
to copy a selected area of a bitmap to another spot on the canvas. 
Alt+click the area that you want to copy, and then click and paint 
where you want the copy to go. Use the Replace Color tool to swap 
one color for another wherever you click and drag the Replace Color 
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brush on the canvas. Simply click with the Red Eye Removal tool to 
replace red with black wherever you click the canvas. Fireworks 8 
has really improved the quality of these tools. These tools work better 
in Fireworks 8 than in the previous version of the program. 


Blur/Sharpen/Dodge/Burn/Smudge tool: Click this tool and click and 
drag on the canvas to soften the focus of (Blur) or bring into focus 
(Sharpen) an area of a bitmap image. Click the Dodge tool and click 
and drag on the canvas to lighten an area of a bitmap image. Click 
the Burn tool and click and drag to darken an area of a bitmap image. 
Click the Smudge tool and click and drag on the canvas to smear a 
part of an image into another part of the image, as if you were finger 
painting. You can set the parameters for these tools in the Property 
inspector. 


Pencil tool: Click the Pencil tool and click and drag to draw single- 
pixel-width lines. If you want control over the thickness and texture 
of the line that you’re creating, use the Brush tool. 


Magic Wand tool: Click the Magic Wand and click a bitmap to select 
neighboring areas of solid or similar colors in your image. 


+ Vector: The following six tools (clockwise from top left) make up the 
Vector section of the Tools panel: 


Line tool: Throw your ruler away! With the Line tool, you can drawa 
straight line every time. You can adjust the line’s thickness, color, 
and other parameters in the Property inspector. 


Pen/Vector Path/Redraw Path tool: Click the Pen tool to create vector 
graphics by drawing vector paths. You can use the Pen tool to select 

points and let Fireworks connect the dots, or you can draw the shape 
yourself with the Vector Path tool. You can use the Redraw Path tool 

to change the shape of a vector graphic by clicking and dragging any 
of the points that define the shape. 


Text tool: Click this tool and click the canvas to place and edit text 
on the canvas. See Book III, Chapter 3 for information on how to 
make the most of the Text tool. 


Knife tool: Click this tool and click and drag a line to cut vector paths 
in two. 


Freeform/Reshape Area/Path Scrubber (Additive)/Path Scrubber 
(Subtractive) tool: Use the Freeform tool to reshape a vector path by 
pushing or pulling the stroke instead of moving the individual points 
that define it. Use the Reshape Area tool to pull a vector path as if 
you grab it with your hand. Use the Path Scrubber tool to change the 
color, thickness, and various other properties of the vector path. If 
you have a graphics tablet, you can set the properties to vary based 
on variations in the pressure or speed that you use in drawing. 
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e Rectangle/Rounded Rectangle/Ellipse/Polygon tool: Create vector 
shapes by clicking these tools and clicking and dragging on the 
canvas. 


+ Colors: The Colors tools allow you to select and apply colors to lines, 
objects, and anything else on your canvas. The two main Colors tools, 
located in the top row of the section, are 


e Eyedropper tool: Click this handy tool to select a color from the 
swatches in the color picker or from any object on the canvas by 
clicking when you place the Eyedropper on the color that you want. 


e Paint Bucket/Gradient tool: Click this tool and then click a shape on 
the canvas to fill the shape with a solid color (Paint Bucket) or gradi- 
ent. For details about gradients, see Book III, Chapter 4. 


Across the aisle: The right-side panels 
Eight key panels appear on the right-hand side of the screen, opposite the 
Tools panel. These panels include the following: 


+ The Optimize panel: This panel lets you set your export options (GIF or 


JPEG, quality level, and so on). See Book III, Chapter 6 for more informa- 
tion about the Optimize panel. 


The Layers panel: This panel contains all your layer options and infor- Book III 
mation. The first layer is always the Web layer, which holds information Chapter 1 
about the coordinates of the slices. (See Book III, Chapter 6 for more 
about slices.) = 
T = 
The Frames and History panel: This panel gives you access to the 3 s 
Frames area, where you can navigate easily among the frames in your 3 S 
document. You use frames to make button rollovers and animations. x E 
(See Book III, Chapter 5 for more details.) This panel also allows you to Oo 


view the History area, which is a list of your most recent actions. 


The Assets panel: This panel provides a way to centralize and organize 
links from Web objects to Web pages. Fireworks can actually generate 
your entire Web page — images, code, and all. 


The Auto Shape Properties panel: When you select an Auto Shape 
object on the canvas, you get access to many of its special properties 
via this panel, including Thickness and Roundness. 


The Special Characters panel: The Special Characters panel gives you 
easy point-and-click access to — you guessed it — special characters, 
when you use the Text tool to add words to your design. Special charac- 
ters include letters with accent marks, dollar and copyright symbols, 
and the like. 
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+ The Image Editing panel: The Image Editing panel collects the most- 
used tools from the Select and Bitmap sections of the Tools panel, along 
with some filters and menu commands, and lays them out for quick 
access from the right side of the canvas. 


+ The Colors panel: The Colors panel, via its Mixer and Swatches tabs, 
offers quick access to the tools that you can use to add and edit colors 
and gradients to objects on the canvas. 


The Property inspector 


The Property inspector is docked to the bottom of the Document window. 
This panel changes automatically to reflect the settings for the currently 
selected tool or object. 


The Property inspector allows you to see and adjust the parameters of what- 
ever object or tool you select. If you’re working on a text layer, for example, 
the Property inspector gives you immediate access to and complete control 
over the font, size, color, and other attributes of the text. When you select a 
shape, on the other hand, the Property inspector offers you easy access to 
controls over the shape’s size, position on the canvas, color, texture, and 
more. 


If you ever want to hide all the panels temporarily, press F4 or the Tab key. 
To make the panels visible, press F4 or the Tab key again. 


Viewing and Previewing Vour Work 


While you work, you view the canvas with Original view selected. The other 
three view options at the top of the canvas allow you to preview what your 
optimized images will look like as follows: 


+ Original: This is the default view in which you create and edit your 
design. 


+ Preview: This view shows you what the page will look like when it is opti- 
mized for the Web, based on your current image optimization settings. 


+ 2-Up: This view offers previews of what optimized images will look like, 
but with a little something extra: a side-by-side comparison of the origi- 
nal image and an optimized version of the image, or two optimization 
settings. 


+ 4-Up: By selecting the 4-Up view, you can preview the original image and 
three different optimization settings at the same time. You can compare 
how they look and how big the resulting image file is at each setting, as 
well as how long the image takes to download at a particular modem 
speed. 
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Because every image compresses a little differently, you can never predict 
exactly what an image may look like after you optimize it. The longer you 
work with Fireworks, the better you get at narrowing the optimization options 
before you preview; nevertheless, you may find it more efficient to preview 
before you export. For more information about the purpose and art of image 
optimization, see Book III, Chapter 6. 


At the top right of the canvas is a feature that you may have met in the ori- 
ginal Fireworks: a Quick Export button. The Quick Export button lets you 
export files to, and even launch, other applications, such as Dreamweaver 8, 
Macromedia Flash 8, and FreeHand MX. The Quick Export button also gives 
you export options for Macromedia Director Shockwave Studio, Adobe 
Photoshop, and other programs. 


Customizing Vour Work Environment 


«e 


During different phases of the design process, you may find that you refer to 
some panels constantly but other panels not at all. Unless you have a gigantic 
monitor set to a high resolution, you need to collapse some less-frequently 
used panels to make room for more-frequently used ones. 


Collapsing and expanding panels 

Every panel’s name appears at the left on the top title bar in the panel. To the 
left of the name sits a handy little arrow that points down to indicate that the 
panel is expanded or points to the panel name if the panel is collapsed. 


You can expand or collapse a panel in two ways: 


+ Click the name of the panel. 


+ Click the arrow to the left of the panel name. 


When the panel expands, it makes room for itself by forcing the panels below 
it down — unless it’s a panel on the bottom, in which case it forces the panels 
above it up. If your monitor doesn’t have enough room to show all the panels 
open at once, Fireworks collapses the panel directly beneath or above the 
one that you expand. 


If you have a panel expanded but still can’t see quite enough of it, you can 
drag the panel open wider or longer by clicking the left or bottom edge of 
the panel and dragging it. 


In addition to collapsing and expanding panels, you can also open and close 
panels. Check out Table 1-1, which includes the key commands for closing 
and opening panels. 
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Table 1-1 Keyboard Shortcuts for Opening and Closing Panels 
Panel Keyboard Shortcut Panel Keyboard Shortcut 

Tools Ctrl+F2 Styles Shift+F11 

Properties Ctrl+F3 Library F11 

Optimize F6 Color Mixer — Shift+F9 

Layers F2 Swatches Ctrl+F9 

Frames Shift+F2 Info Alt+Shift+F12 

History Shift+F10 Behaviors Shift+F3 





To hide all panels at once, choose Window™Hide Panels, or use the keyboard 
shortcut F4. 


Moving, docking, and grouping panels 

When you open Fireworks for the first time, all the panels are docked and 
grouped in the default configuration. (Refer to Figure 1-3 to see this default 
configuration.) However, you can easily undock and move panels and put 
them in custom groups. 


To move a panel, follow these steps: 


1. Click the gripper at the top left of the panel. 


The gripper is made up of two parallel lines of dots at the top left, on the 
panel’s title bar. 


2. Drag the panel to the spot on the screen where you want it to go. 
3. Release the mouse button. 
You now see the panel in the position that you selected, in its own 


window, as you can see in Figure 1-4. 


When you move a panel, you automatically undock it, but you don’t automat- 
ically dock it somewhere else when you release the mouse button. The panel 
remains floating in the Fireworks window until you dock it. To dock a panel, 
follow these steps: 





1. Place your cursor over the gripper at the top left of the panel. 


The gripper is made up of two parallel lines of dots at the top left, on the 
panel’s title bar. 





Figure 1-4: 
An 
undocked 
panel. 
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2. Drag the panel to a docking area. 


A docking area is anywhere along the outer edge of the Document window 
or adjacent to a docked panel. When you drag the panel over a docking 
area, a rectangle appears on the screen to give you a preview of the 


space that the panel occupies if you docked it there. 


3. Release the mouse button. 


The panel is docked in its expanded state. 


Fireworks allows you the option to consolidate or group panels, which pro- 
vides a nice way to put the panels that you like using together. To group a 
panel with another panel, follow these steps: 


1. Click the Panel Options icon (the three white lines and arrow) at the 


top right of the panel that you want to add to a group. 


The Panel Options menu appears. 


2. Select the Group [Name of selected panel] With option. 


An additional pop-up menu appears. 
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3. Choose the panel that you want to group the currently selected panel 
with. 


The panel that you add appears as a tab in the panel to which you 
added it. 


Follow these steps to remove a panel from a group, or just follow the first 
three steps to close the panel group: 
1. Click the tab of the panel that you want to separate from the group. 
2. Click the Panel Options icon at the top right of the panel. 
The Panel Options menu appears. 
3. Select the Close Panel Group option. 


This option closes not only the panel that you want to close, but also 
any other panels in that group. 


4. Reopen any panels from the group that you didn’t want to close by 
clicking their names in the Window menu. 


If you have moved your panels around and docked them to accommodate 
a particular project or document, you can save your panel arrangement 
by choosing WindowWorkspace Layouts™Save Current and giving your 
settings a name. You can then retrieve that layout set-up from the same 
location. 


Setting Fireworks Preferences 


Setting preferences allows you to customize the way Fireworks handles cer- 
tain basic functions and displays certain items. To edit Fireworks prefer- 
ences, choose Edit™Preferences or use the keyboard shortcut Ctrl+U. 


As you can see in Figure 1-5, the Preferences dialog box has five tabs: 


+ General 
+ Editing 
+ Launch and Edit 
+ Folders 
+ Import 
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Setting General preferences 


You can select the General tab on the Preferences dialog box and customize 
the following settings: 


+ Undo Steps: Set the value from 0 to 999. This setting affects Edit®Undo/ 
Redo and also increases the number of possible steps in the History 


panel. Be aware, however, that the more Undo steps you allow, the more aoe 
memory Fireworks requires. You must close and relaunch Fireworks to 
use the new setting. 

+ Color Defaults: Set the default colors for Stroke (a line or border), Fill am = 
(the inside of a shape), and Highlight (the color that indicates what you £ a 
currently have selected). To apply the changes to the default Stroke and ga 
Fill colors in the current document, you have to click the Set Default a s 
Stroke/Fill Colors button in the Tools panel. Ss 


+ Interpolation: Choose one of the four methods that Fireworks can use to 
render a change to the image size: 


e Bicubic Interpolation: The default method, generally yields the 
highest-quality results 


e Soft Interpolation: Blurs the image slightly 


e Bilinear Interpolation: Gives a sharpness level somewhere in 
between Bicubic and Soft 


e Nearest Neighbor Interpolation: Sharpens edges 


A check box new to Fireworks 8 lets you select Faster but Less Accurate 
Resampling. This box is checked by default. For slower but more accu- 
rate resampling, uncheck the box. For more details on changing image 
size, see Book III, Chapter 2. 
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+ Launch options: Select this check box if you want to see the Start Page 
when you launch Fireworks; deselect the check box if you don’t want to 
see the Start Page. 


Editing just the way you want 


Select the Edit tab to access these editing preferences in Fireworks: 


+ Delete Objects When Cropping: Leave this check box selected if you 
want to delete objects and pixels that fall outside the area to which you 
crop your image. 


+ Delete Paths When Converting to Marquee: Uncheck this box if you want 
a path to remain on the canvas when you convert it to a marquee. 


+ Brush-Size Painting Cursors: Select this check box if you want the cursor 
size to represent the size of stroke that you are about to make. 


+ Precise Cursors: Select this check box if you prefer to use cross hairs as 
a cursor rather than the custom cursors for each tool. 


+ Bitmap Option: Select the Turn Off “Hide Edges” check box if you always 
want to see the path selection feedback of a selected object. 


+ Pen Tool Options: You have two options here: 


e Select the Show Pen Preview check box if you want Fireworks to show 
you what your path will look like (before you actually draw the line) 
based on the position of your cursor. 


e Select the Show Solid Points check box if you want selected points to 
appear hollow and deselected points to appear solid. 


+ Pointer Tool Options: You have several options here: 


e Select the Mouse Highlight check box if you want an object’s selec- 
tion feedback (the box that indicates that an object has been selected) 
to activate when you roll the cursor over that object. 


e Select the Preview Drag check box if you want to see an object as 
you drag it. 


e Select the Show Fill Handles check box if you want to be able to drag 
handles to change the position, width, skew, and rotation of a gradi- 
ent fill. 


e Set the value of the Pick Distance option from 1 to 10 to specify how 
close in pixels your cursor needs to be to an object for you to select it. 


e Set the value of the Snap Distance option from 1 to 10 to specify how 
close to a grid or guide in pixels an object must be before the object 
snaps to the grid or guide. 


MBER 
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Telling Fireworks how to play with others 


You set the Launch and Edit preferences to specify how you want Fireworks 
to act when it’s launched from within other applications in the Macromedia 
Studio 8 suite. 


The options are the same whether you choose options under When Editing 
from External Application or When Optimizing from External Application: 


+ Ask When Launching: Select this option if you want Fireworks to ask 
you whether or not to edit the PNG source file when you launch 
Fireworks from within another application. 


+ Always Use Source PNG: Select this option if you want Fireworks 
always to find the source PNG for editing an image from within another 
application. 


+ Never Use Source PNG: Select this option if you never want Fireworks to 
locate and make available for editing the source file for an image that you 
are editing from within another application. 


In most cases (with Macromedia Flash being an exception), if you edit an 
image by launching Fireworks from within another application, Fireworks 
attempts to locate the source PNG file for editing, regardless of the Launch 
and Edit preferences. 


Expanding your Folder options 

Fireworks comes with its own effects, textures, and patterns, but the applica- 
tion allows you to access additional materials for use in modifying bitmap 
images. Select the Folders tab to gain access to the following: 


+ Photoshop Plug-Ins: If you have Photoshop plug-ins that you want to be 
able to use in Fireworks, select the Photoshop Plug-Ins check box. Use 
the dialog box to browse to the folder that holds those plug-ins. 


+ Textures: If you have additional textures that you want to access from 
within Fireworks, select the Textures check box. Use the dialog box to 
browse to the folder that has the texture files. 


+ Patterns: If you have additional patterns that you want to access from 
within Fireworks, select the Patterns check box. Use the dialog box to 
browse to the folder that has the pattern files. 


If you change these preferences, you need to quit and relaunch Fireworks for 
the changes to take effect. 


You can access the effects, textures, and patterns from the Property inspec- 
tor when you select an object. 


Book Ill 
Chapter 1 


8 Syomall4 
0} uonanponu] 


190 Getting Help 


Importing files in a useful form 
Set the Import preferences to tell Fireworks how you want to convert 
Photoshop (. psd) files for editing in Fireworks: 


+ Layers: You have three options under this heading: 


e Convert to Fireworks Objects: Select this option if you want Fireworks 
to make each Photoshop layer into an object on its own Fireworks 
layer. 


e Share Layer Between Frames: Select this check box if you want to 
share each layer of the Photoshop file across all Fireworks frames. 


e Convert to Frames: Select this option if you want Fireworks to import 
each Photoshop layer as a Fireworks frame. This option can save you 
a few steps if the Photoshop file has layers that correspond to anima- 
tion frames or button states. 


+ Text: You have three options under this heading: 


e Editable: Select this option if you want to edit text layers from the 
Photoshop file using the Fireworks Text tool. The text may look 
slightly different in Fireworks, though it’s close. 


e Maintain Appearance: Select this option if you need the text in 
Fireworks to look identical to the text in Photoshop but don’t have 
to edit the text. 


e Use Flat Composite Image: Select this check box if you want to 
import the Photoshop file as a flattened, one-layer image. 


Getting Help 


Fireworks offers several forms of assistance to users. If you can’t find the 
answer to your question in this book, you have several good options avail- 
able to you: 


+ The Help menu: This menu offers links to appropriate parts of the 
Macromedia Web site and an indexed, searchable online manual. 


Press F1 to access the online manual at any time when you’re using 
Fireworks. We always go to the online manual first when we need to 
figure out how to do something in Fireworks. 


+ Fireworks tutorials: You can use either of two basic Fireworks tutorials, 
one on Graphic Design Basics and the other on Web Design Basics. You 
can download them from the Web by clicking the “Learn about docu- 
mentation resources” link on the Fireworks Start page and then clicking 
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the “Tutorials” link in the Macromedia Fireworks 8 Documentation sec- 
tion at the top of the page. Then click the Download PDF link to down- 
load the appropriate PDF and source files for your platform (PC or Mac). 
The tutorials are quick, easy, and very helpful to the novice. 


+ The installation CD-ROM: The CD-ROM from which you installed 
Fireworks contains a couple of searchable, printable PDF files: 


e Using Fireworks PDF: Offers the basics 


e Extending Fireworks PDF: Describes how you can use JavaScript to 
control every command and setting in Fireworks 


You can copy the PDFs into the Fireworks folder on your hard drive so 
that you don’t have to rummage around for the installation CD when you 
have a question that this book and the Help menu can’t answer. 


+ Tooltips: Tooltips are built into the Fireworks user interface. Hover the 
cursor over an interface element to see a brief description of the ele- 
ment’s function or capabilities. 


If none of these resources gives you an answer to your question, Macromedia 
offers both free Web-based support (including online forums) and fee-based 
support via e-mail and telephone. 
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Chapter 2: Fireworks 8 Basics 


In This Chapter 


Creating a new Fireworks document 
Switching the view of your document 
Saving your documents 

Changing a document’s size 


Understanding color management 


Í: this chapter, we introduce some of the basic processes of working with 
Fireworks 8. If you’re a regular computer user, many of these processes 
are already second nature to you. We show you how to create and save a 
Fireworks document, how to change the magnification of your document, 
and how to change the size of your document. We also offer an introduction 
to some issues regarding the way colors appear on the Web. 


Creating a New Document 


Before you can start creating or editing cool images with Fireworks, you 
need to start the program and either create a brand-new blank document or 
open an existing image that you want to change. You can open Fireworks in 
several ways: 


+ Select Fireworks 8 from the Start menu. 


+ Click the Fireworks icon in your taskbar or double-click the icon on your 
desktop, if you have either of those options available. 


+ 


Double-click the icon of an existing Fireworks PNG file. 


+ Double-click the icon of any image associated with Fireworks. (During 
installation, you can choose which file types you want to associate with 
Fireworks, including GIFs and JPEGs.) 


No matter how you open Fireworks, you can create a new Fireworks docu- 
ment by following these steps: 
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Figure 2-1: 
Set the 
canvas size 
and canvas 
color in the 
New 
Document 
dialog box. 


1. Choose File™New or press Ctrl+N. 


The New Document dialog box opens, displaying options for the size and 
background color of your canvas, as well as the resolution of your docu- 
ment, as Figure 2-1 shows you. The settings of the most recently opened 
Fireworks document determine the default for all these settings. If you 
want to use those settings, simply click OK. Otherwise, continue with 
the following steps. 





New Document 
Canvas Size: 463, 8k 
Width: 400 Pixels ~| W: 400 
height: 300 Pixels w| H: 300 
Resolution: 72 Pixels/Inch ¥ 
Canvas color 
© white 
Transparent 
©) Gustom: 
z 
OK } l Cancel 








2. Type numbers in the Width and Height text fields to set the width and 
height of your canvas; use the drop-down list to select whether you 
want the width and height of the canvas measured in pixels, inches, 
or centimeters. 


If you’re designing for the Web, pixels work best because pixels are the 
basic display units on computer monitors. If you’re designing for print, 
inches or centimeters may work better. 


You can use different units of measurement for the width and height, 
although it would probably be more confusing than helpful. 


3. Set the canvas color. 


The default canvas color is white. You can also set the canvas to be 
transparent, which can be useful if you’re making a graphic that you 
want to have a transparent background. If you want your Web page to 
use a particular color for the background, click the square to use the 
eyedropper and choose a color from the color picker, as you can see in 
Figure 2-2. 


4. Click OK. 


Your canvas opens to the specified size and with the specified back- 
ground color. 


Figure 2-2: 


Use the TE #330900 


color picker 
to selecta 
custom 
background 
color for 
your 
canvas. 
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Changing Views of Vour Document 


After you start adding stuff to your canvas, you may find that you want to 
make adjustments too fine to eyeball with the canvas at 100-percent size. 
Fireworks offers several ways for you to increase and decrease the magnifi- 
cation of your canvas. Changing the magnification doesn’t affect your docu- 
ment’s size, it just changes your view of it, as if you’re looking at your 
document through a magnifying glass. 


To increase the magnification of the canvas so that you can make fine adjust- 
ments, use one of the following methods: 


+ 


+ 


Choose View™Zoom In or press Ctrl+=. Repeat as necessary to achieve 
the view that you want. 


Choose View™Magnification, and then select a magnification percent- 
age greater than 100 percent. If you use this method, you can select 
your magnification percentage directly, instead of stepping through each 
level. Figure 2-3 shows this selection method. 


Click the Magnification drop-down list at the bottom-right of the canvas 
and select from the list of preset magnification levels. 


Click the Zoom tool in the View section of the Tools panel, and then 
click the canvas. If you press Ctrl+Z, you can click and drag the Zoom 
tool to zoom in on the selected area of the canvas. 


If your canvas is larger than the window in which you’re viewing it, you can 
decrease the magnification of the canvas so that you can see the entire docu- 
ment by using one of the following methods: 


+ Choose View™Zoom Out or press Ctrl+-. Repeat as necessary to 


achieve the view you want. 


+ Choose View™Magnification, and then select a magnification percent- 


age less than 100 percent. If you use this method, you can select your 
magnification percentage directly, instead of stepping through each level. 
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Figure 2-3: 
Changing 
the canvas 
magnifi- 
cation. 





+ Click the Magnification drop-down list at the bottom of the canvas and 
select from the list of preset magnification levels. 


+ Click the Zoom tool in the View section of the Tools panel, and then 
hold down the Alt key and click the canvas. Notice that when you press 
the Alt key while you have the Zoom tool over the canvas, the plus sign in 
the tool changes to a minus sign to indicate that you can click to zoom out. 


You can access several of the most common magnification levels in one step 
with the key commands listed in Table 2-1. 



























































































Table 2-1 Magnification Shortcuts 
Magnification Percentage Key Combination 
50% Ctrl+5 
100% Ctrl+1 
200% Ctrl+2 
300% Ctrl+3 
400% Ctrl+4 
800% Ctrl+8 
1600% Ctrl+6 
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Saving Documents 


ae 


You may have read this advice elsewhere, but it bears repeating: Save early 
and save often. We can’t think of anything worse than working for hours on 
an image, getting it just perfect, and having a power outage or other mishap 
wipe out all that work in one cruel second. 


Spare yourself the frustration of losing your work and save your documents 
often by choosing File™Save or by pressing Ctrl+S. When you save a file that 
you create in Fireworks using this method, you save the file in the native 
Fireworks file format, PNG. 


When you open and edit a TIFF, BMP, WBMP, GIF, or JPEG, you can save as 
that file type, instead of saving the edited file as a PNG. To exercise the 
option, just save by choosing File™Save or by pressing Ctrl+S. If you’ve 
added Fireworks-specific elements like slices or frames to your file, a dialog 
box appears, asking how you want to save the file. If you save the file as its 
original format, you lose any of those Fireworks-specific features. 


You can still use the Undo command after you save, so it never really hurts to 
save your document. However, if you want to preserve intermediate versions 
of a document, you can save versions, instead of saving over your previous 
work. If you want to try several different approaches to a design but don’t 
want to clog one file with all of the approaches, use the Save As command 
and name the file with a slight variation. (For example, if you named your file 
homepage.png, you can name a second version homepage_v02.png.) When 
you choose Save As, any changes to the file since you last saved it are saved in 
the new version of the file, not the old one. 


To save a version of your document, follow these simple steps: 
1. Choose File>Save or press Ctrl+S to save the file in its current state, 
with its current name. 
2. Choose File™Save As or press Ctrl+Shift+S. 
The Save As dialog box appears, as you can see in Figure 2-4. 
3. Type a new filename in the File Name text field. 


If you have already named the file, the current name already appears in 
the text field, so you need to modify the filename in order to save the 
current version of the document. 


4. If you’re editing a non-PNG file and want to save the file in its original 
format, use the Save As Type drop-down list to select the format. 


5. Click Save. 


The new version of the file is now open and ready for modification. 
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Modifying Document Size 


You can modify the size of your Fireworks document in two fundamentally 
different ways. With these methods, you’re changing the actual dimensions 
of the document, not just the magnification of the canvas: 


+ Changing the image size: When you change the image size, Fireworks 
re-creates the entire document, including everything on the canvas, at a 
different height and/or width. 


+ Changing the canvas size: When you change the canvas size, you don’t 
change the size of the objects on the canvas, you only change the size of 
the space on which you put the material, as if you cut the top, bottom, 
or sides off a printed picture (or pasted extra strips on, if you’re increas- 
ing the canvas size). You can use the crop tool to reduce the canvas size, 
or you can use a dialog box to increase or reduce the canvas size. 


Changing the image size 

To change the image size of your document, you use the Image Size dialog 
box, which you can access by choosing Modify*Canvas™Image Size. When 
you change the image size of your document, you change the dimensions 

of the canvas and of everything on the canvas. If you shrink your image, 
Fireworks discards some of the data when it reorders the pixels to make the 
image smaller. 


If you increase the size of your image, Fireworks interpolates data, which 
means it performs sophisticated calculations to decide what color of pixels 
to add and where to add them in order to make a larger version of the image. 
Although Fireworks interpolates smartly, you can’t avoid some amount of 
distortion. 


NING, 
Ry 


Modifying Document Size 199 


Using the Image Size dialog box, you can choose which method Fireworks 
uses to interpolate or resample pixels: 


+ Bicubic interpolation: Bicubic interpolation is the default method and 
generally gives you the highest-quality results with the widest variety of 
images by taking an average of the nearest 16 pixels in the original image 
size to create a new pixel in the resized image. 


+ Bilinear interpolation: The bilinear method gives a sharpness level 
somewhere in between Bicubic and Soft. 


+ Soft interpolation: This method blurs the image slightly. Why would you 
want to slightly blur the resized image? Because resizing can result in 
visual inconsistencies in the image called artifacts. Blurring the image 
takes the edge off the artifacts, rather like a soft-focus lens makes a star- 
let’s skin look smoother. 


+ Nearest-neighbor interpolation: This method sharpens edges, so it 
works best on images that don’t have subtle gradients. If you use this 
method on a bitmap of a sunset, for example, you'll get banding — 
noticeable stripes of color instead of a smooth blending of colors. 


When you shrink your image, Fireworks discards some pixels and replaces a 
few to smooth out the resized image. If you have a 400 x 300 image that you 
shrink to 240 x 180, and then you enlarge it back to its original size, the image 
that you end up with doesn’t exactly match the original image. However, as 
long as you don’t make extreme size changes, you may not notice much of a 
difference. 


If the Constrain Proportions check box is selected in the Image Size dialog 
box, as it is by default, and you change the width in the Pixel Dimensions 
part of the dialog box, the height in that part of the dialog box updates 
automatically, as do the width and height in the Print Size part of the dialog 
box. If you change the image resolution in the Print Size part of the dialog 
box, the width and height in both Pixel Dimensions and Print Size update 
automatically. 


The Pixel Dimensions and Print Size widths and heights are identical, they’re 
just being measured with different units. (In the Image Size dialog box, you 
can set Pixel Dimensions and Print Size to use the same units of measure- 
ment. See below to learn how.) 


To change the image size of your document in order to display the image 
online, follow these steps: 
1. Choose Modify~Canvas™Image Size. 


The Image Size dialog box appears, with the current image size and reso- 
lution as the defaults, as you can see in Figure 2-5. 
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Figure 2-5: 
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2. Type new numbers in the width and height text fields in the Pixel 


Dimensions part of the dialog box to set the new width and height 
for your image; use the drop-down list to select whether you want 
to change the width and height of the image based on pixels or 
percentages. 


If you’re designing for the Web, you may want to use pixels because pixels 
are the standard units of computer monitor display. If you’re designing 
for print, inches or centimeters may work better. If you want your new 
image to have the same aspect ratio (the ratio of width to height, for 
example, 4:3 for an image that is 400 x 300 pixels) as your current image, 
leave the Constrain Proportions check box selected. A padlock icon at 
the right indicates that Fireworks will constrain proportions. 


If you want to stretch or squash everything in your image as if it’s being 
reflected in a funhouse mirror, deselect the Constrain Proportions check 
box and make sure that the new width and height dimensions don’t pre- 
serve the aspect ratio of the old width and height. (You can make this 
change most easily by changing only height or only width.) 


You can use different units of measurement for the width and height, 
although doing so doesn’t really give you any advantages. 


. Select a method for resampling your image or leave it at the default. 


You can read more about resampling settings (Bicubic interpolation or 
Soft interpolation, for example) earlier in this section. 


. Click OK. 


The image resizes. 


To change the image size of your document for the purpose of printing it, 
follow these steps: 
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1. Choose Modify~Canvas™Image Size. 


The Image Size dialog box appears, with the current image size and reso- 
lution as the defaults. 


2. Set the image resolution in the Print Size section of the Image Size 
dialog box. 


Computer screen resolution is standardized at 72 dots per inch (dpi). 
Most printers nowadays print at resolutions of anywhere from 300 dpi 
to 2400 dpi. If you’re designing for the Web and working with a resolution 
of 72 dpi, changing the resolution here doesn’t increase the resolution 
of any of your bitmaps (that’s kind of like trying to focus a photograph 
after you’ve already taken it), but it ensures that the printout fills the 
page properly. 

3. Type new numbers in the width and height text fields in the Print Size 
part of the dialog box; use the drop-down list to change the measure- 
ment units, if you want. 


If the Constrain Proportions check box is selected, as it is by default, 
and you want the printed image to have the same aspect ratio as the 
current image, skip this step and go on to Step 4. You can deselect the 
Constrain Proportions check box and type new numbers in the Width 
and Height text fields if you want to stretch or squish your image. 


You can use different units of measurement for the width and height, Book III 
although doing so doesn’t give you any advantages. Chapter 2 

4. Leave the Resample Image check box selected unless you want to T 
change the image size by changing the image resolution. £ 

If you change the image resolution, you change the number of pixels = 
per inch. co 

w 

5. Click OK. a. 
iz) 

7) 


The image resizes. 


Changing the canvas size 

Making the canvas size smaller is sort of like removing strips from the out- 
side of a drawing or painting. Whatever is on those strips gets discarded 
with the strips. In other words, when you reduce the canvas size, you essen- 
tially crop or cut out a piece of the image. 


To reduce the canvas size, follow these steps: 


1. Choose Modify*Canvas™Canvas Size. 


The Canvas Size dialog box opens, as you can see in Figure 2-6. The 
default width and height dimensions when the dialog box opens are the 
current dimensions of the document. 
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Figure 2-6: 
Use the 
Canvas Size 
dialog box 
to crop your 
canvas. 
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2. Type new numbers for the width and height in the text fields and 
select the measurement units for the width and height. 


You have the choice, as you do elsewhere, of pixels, inches, or 
centimeters. 


3. Select the anchor area. 


Because yov’re cutting off part of your canvas, you have to set the anchor 
to tell Fireworks which edges of the canvas to discard. You can click 


One of the top three squares: Fireworks preserves the top and cuts 
off any pixels below the height that you have set in the height text 
field. 


One of the middle three squares: Fireworks removes the top and 
bottom of the existing document. 


One of the bottom squares: Fireworks cuts off any pixels above the 
height that you have set in the height text field. 


One of the left three squares: Fireworks discards any pixels to the 
right of the width that you have set in the width text field. 


One of the middle three squares: Fireworks chops off the pixels on 
either side of the width that you have set in the width text field. 


One of the right three squares: Fireworks lops off everything to the 
left of the width that you have set in the width text field. 


4. Click OK. 


The canvas resizes. 


If you don’t know what dimensions you want your image to have, but you do 
know which area of the current image you want to keep, you can reduce the 
canvas size by using the Crop tool. See Book III, Chapter 1 for information 
about how to use the Crop tool. 
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Making the canvas size bigger is like sewing extra strips onto the outside 
edges of a canvas. You add space to the canvas without changing the size of 
anything already sitting on it. 


To increase the canvas size, just follow these steps: 


1. Choose Modify™Canvas™Canvas Size. 
A dialog box opens, showing the current document dimensions. 


2. Type the new width and height in the width and height text fields and 
select the measurement units for the width and height. 


You can choose pixels, inches, or centimeters. 
3. Select the anchor area. 


Because you’re adding an area on to your canvas, you have to set the 
anchor to tell Fireworks where to put the new area. You can click 


¢ One of the top three squares: Fireworks adds the space to the 
bottom of your current canvas. 


e One of the middle squares: Fireworks adds equal space to the top 
and bottom of your current canvas. 


e One of the bottom squares: Fireworks adds space to the top of your 


current canvas. Book III 


Chapter 2 
e One of the left three squares: Fireworks adds space to the right of 
your current canvas. 


e One of the center three squares: Fireworks adds equal space to the 
left and right of your current canvas. 


¢ One of the right three squares: Fireworks adds space to the left of 
your current canvas. 


4. Click OK. 


The canvas resizes. 
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The primary colors of light are Red, Green, and Blue (RGB). All the colors 
that you see on a computer monitor are made up of varying amounts of 
those three colors. When you work in FreeHand MX, you have the option to 
design using CMYK colors (Cyan, Magenta, Yellow, and Black). CMYK is the 
process used in traditional offset printing. If you’re creating an image that 
you want to use for printing, be sure to set a resolution of at least 300 dpi in 
the Image Size dialog box before you put any bitmap objects in your Fireworks 
document. Better yet, use FreeHand to make the image; you can import the 
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image into Fireworks if you want to deploy it on the Web. (See Book III, Chap- 
ter 8 for information about integrating Fireworks and FreeHand, and see 
Book VI for more about how to use FreeHand.) 


Because Fireworks is made for Web design, it only uses the RGB color spec- 
trum; all its color options are combinations of red, green, and blue. The 
following section explains how you use hexadecimal numbers to create dif- 
ferent colors using the RGB color spectrum. 


Hexadecimal numbers 


When you design a Web page, you select a background color and HTML text 
colors. In HTML, hexadecimal numbers — the # symbol, followed by six digits 
(from 0 through 9) or letters (A through F) — specify colors. Zero represents 
the bottom of the scale (zero luminosity) and F represents the top of the 
scale (full luminosity). 


The hexadecimal number’s six places operate as three pairs. The first pair 
represents red, the second pair represents green, and the third pair repre- 
sents blue. For example, to make the background color for your page white, 
you write the following code: 


<BODY bgcolor="#FFFFFF"> 





In order to make white, you need to set each color to its highest luminosity, 
which is represented by the pair FF. If you want to put black text on your 
page, you can use the following code: 


<FONT color="#000000">text</FONT> 


In order to make black, you need to set each color to its lowest luminosity, 
which is represented by the pair 00. If you don’t understand the code in the 
examples above, see Book II on Dreamweaver 8. 


The hexadecimal expression of a pure RGB red is #FF0000; a pure green is 
#00FF00; and a pure blue is #0000FF. The number of possible colors can 
boggle the mind: It’s in the millions. Only a small subset of those possible 
colors works on the Web, though. 


Web-safe colors 


In the early days of the Web, many computer monitors could display only 
256 colors. Because 40 of those colors were reserved for the computer’s 
operating system or were otherwise off-limits, that left 216 colors available 
for use on Web sites: the Web-safe colors. When you set your monitor’s reso- 
lution to the 8-bit display option, your monitor can show only that old set of 
256 colors. What happens when you look at an image that has colors that 
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don’t fall into that set of 256? Your computer approximates the colors it can’t 
display either by a process called dithering or by changing the colors to 
ones that it can display. 


Dithering is the process of combining two or more colors in order to mimic 
another color. Offset printing uses a similar process in order to make many 
colors out of the four CMYK ink colors. If you look at a color image in a news- 
paper or magazine through a magnifying glass, you see that it’s made up of 





many little colored dots. Viewed from a certain distance, those tiny dots 
blend together to form what looks like solid colors. For example, you may 
see orange with your naked eyes, but if you look closely with a magnifying 
glass, you see alternating yellow and magenta dots on that newspaper or 


Magazine page. 





Variability and Web design 


One of the most frustrating aspects of 
Web design, especially for people trained 
in print design, is that you can accurately con- 
trol many design elements. Monitor settings 
(both in terms of number of colors displayed 
and pixel resolution) vary from user to user, and 
colors on Macintosh monitors appear lighter 
than they do on PC monitors. Users can change 
the size of HTML text in their browsers, and 
they can drag their browser windows as wide 
or narrow as they see fit. Not only that, down- 
load rates may be anywhere from about 5K per 
second with a 56 Kbps modem, to 20 times that 
or more with cable or DSL modems. 


As a result, Web design always starts with a 
consideration of the end user — the average 
person who's going to visit the site. If your Web 
site's audience is mostly college students who 
have high-speed Internet access in their dorms, 
or people working in large companies who have 
high-speed Internet access at their desks, you 
can get away with making image file sizes 
larger. You also can assume those people have 
their monitors set to 16-bit (thousands of colors) 
or 24-bit (millions of colors) because it looks 
better and all computers sold nowadays come 
with video cards that can display at least 16-bit 
color. What you know about your potential end 


users affects your choices of colors for page 
background, HTML text, and GIFs. 


If you have a mix of business users and home 
users, you have to make some compromises in 
page width, image quality, and other things. If 
your users are mostly older, you may want to 
make your default text size a little bigger than 
average, or you may simply want to design your 
page to accommodate a larger text size. Always 
try to choose a text color that contrasts fairly 
sharply with the background color. 


Web designers have a phrase that describes 
what you want your design to do so that all users 
can have a satisfactory experience on your site: 
You want your design to degrade gracefully. 
Where you don't want to compromise quality or 
remove features to bring every user's experi- 
ence down to the lowest common denominator, 
make sure that users with the least fancy equip- 
ment or with disabilities can still access your 
important content. For example, blind users have 
access to any text on your site via screen reader 
software (which reads the text on your site 
aloud) or Braille software and hardware. For 
more information on accessibility issues and 
standards, visit the World Wide Web Consortium 
(W3C) Web site at www. w3 . org. 








Book Ill 
Chapter 2 


soiseg 9 HOMA 


206 An Introduction to Color Management 


EMBER 
X 


When a computer dithers a color, it patterns two colors to create the illusion 
of a third color. As with a color photo in a newspaper, this strategy works 
only to a limited extent. If you look closely, you can see the pattern. If you 
use the dithered color for a line or some small page element, you may not 
really notice the dither. If, on the other hand, you select non-Web safe colors 
for your page background and/or text colors, people who view your site 
using a monitor set to 8-bit may have a difficult time trying to read the text 
on your Web site. 


If users have their monitors set to 16-bit and they’re looking at a 24-bit color, 
they get a dithered color also, but the higher resolution of 16-bit versus 8-bit 
means that the computer can choose closer colors, so the dither doesn’t 
look as obvious. 


The more colors that you have in your image, the larger the file size. 


So do you want to use only Web safe colors when you design your Web site? 
Isn't that terribly limiting? After all, designers didn’t choose the Web safe 
colors, and you can find some really ugly ones in the bunch! 


Go ahead and use non-Web safe colors, but think about what you’re using 
them for and whether the people visiting your site may only be able to see 
them dithered. 


In the early days of the Web, when most Web surfers had 8-bit monitors and 
used early browsers, designers predithered all their images. That way, images 
looked essentially the same to all users, whether the users had 8-bit displays 
or 16-bit displays. Nowadays, browsers have become more sophisticated, 
and average computer owners can afford monitors that display at 16-bit and 
higher. As a result, designers have decided that in certain cases, it’s better to 
allow inconsistency in the realm of display in order to offer higher image 
quality to better-equipped users. 


In keeping with tradition, though, Fireworks still uses the Web-safe color 
palette as its default in the color picker. 


In the next chapter, we get into the nitty-gritty of applying all this color stuff 
to the real-life situations of choosing colors for page backgrounds, HTML 
text, and the like. 


Chapter 3: Working with Text, 
Shapes, and Images 


In This Chapter 


Entering and editing text 
Creating and changing shapes 
Working with bitmaps 


Í this chapter, we explore the power that Fireworks 8 gives you to write 
and edit text, make and manipulate vector shapes, and create and mutate 
bitmap images. You may sometimes feel a little overwhelmed by the control 
that you have with Fireworks. But Fireworks has a limited number of tools, 
and the concepts behind the tools are simple. And whether you have a clear 
idea about what you want or you’re interested in experimenting, Fireworks 
suits your needs. 


Working with Text 


Text is the most common element on most Web pages, much as text is the 
most common element in magazines and newspapers. Unlike with printed 
material, however, users can alter the size and appearance of HTML text to 
a certain extent. Some of the most important decisions that you make in 
building your Web site involve how you present text on the screen. In gen- 
eral, a finished Web page has two kinds of text: 


+ HTML text: The text that you see on the Web page that you create with 
HTML. This type of text is akin to the text in word-processing software, 
such as Microsoft Word. 


+ Graphic text: The text that’s embedded in an image, such as a JPEG ora 
GIF file. In other words, it’s a picture of text. 


Which method of presenting text works better for you and people viewing 
your Web site depends largely on the function of the text. 


Some advantages of using HTML text include the following: 


+ HTML text is smaller (in kilobytes) and therefore loads faster in a user’s 
Web browser. 
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+ Visitors can vary the size of the text by changing settings in their 
browsers. 


+ Special software and hardware (in the case of Braille) can make HTML 
text available to visually-impaired users via audio or touch. 


+ Visitors to your site can select, copy, and paste HTML text into e-mails 
or word-processing documents, which can help spread the word that 
you're trying to get out via your Web site. 


On the downside, HTML text can use only very basic fonts — those fonts 
that all computers have, notably Arial and Times — and you can present 
HTML text in only a limited number of ways. 


Graphic text, in contrast, is much more visually dynamic than HTML text 
because it’s part of an image. You commonly find graphic text used for but- 
tons and banners, which need to grab the user’s attention. Some of the key 
advantages to using graphic text include the following: 


+ You can create text using any font that you have installed on your 
computer. 


+ You can apply a lot of different effects to text, like glows and shadows 
(both conventional drop-shadows and the new shadow auto shapes). 
See Book III, Chapter 4 for details. You can also run text along a path — 
sideways, diagonal, or even curved! We show you how in the “Aligning 
text along a path” section. 


+ You have greater control of things like leading (the spacing between 
lines of text) and kerning (the spacing between letters). 


Of course, using graphic text also has drawbacks. Users can’t copy and 
paste text from graphic text, for example. Also, because the graphic text is 
part of an image, the size (in kilobytes) of the text is larger than that of plain 
HTML text. 


Remember, always use an ALT tag for graphic text. The ALT tag says what 
the graphic text says, so visually-impaired users have access to it. 


Regardless of the kind of text that you want to create, Fireworks can help. The 
following sections show how you can use the Fireworks text editing tools to 
create text as part of an image, as well as export text in HTML format. 


If you want to include your main HTML text in your Fireworks document, or 
if you want to use placeholder text that you eventually replace with final 
HTML text later in Dreamweaver, use the Fireworks text default, 12-point 
Arial or Verdana (with no anti-alias), in your page design. Using one of those 
settings gives you a good approximation of how the text looks on the HTML 
page that you make from your design. 


Figure 3-1: 
Click the 
Text tool 
to reveal 
an |-beam- 
shaped 
pointer. 
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Creating text with the Text tool 


You can create text with Fireworks in a snap, which really helps you out 
because you do a lot of text-creating when you make images and page mock- 
ups. To create some text, just follow these three easy steps: 


1. Select the Text tool by clicking the capital A in the Vector section of 
the Tools panel. 


An I-shaped pointer appears, as you can see in Figure 3-1. 
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2. Move the pointer to the point on the canvas where you want to create 
the text. 


3. Click the canvas and type away. 


You can always move the text later, as well as change its font or color. We 
cover those details later in this chapter. 


If you need to insert a special character, like a dollar sign or letter with an 
accent mark, simply place the cursor in the text block where you want the 
character to go and click the character in the Special Characters panel. 
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If the text you want to add already exists in a word-processing program, 
open the text document, select the applicable text, and copy it. Then select 
the Text tool in Fireworks, click the canvas, and press Ctrl+V to paste the 
text. Your text appears in the default font. 


If you’re pasting text into your Fireworks document, set the width of the text 
box before you paste the text in. The default Fireworks text box expands out- 
ward to the right rather than downward. To set the width of the text box, 
select the Text tool from the Tools panel and click and drag diagonally on 
the canvas to create a text box of the right size. If your text is too long to fit 
in the box that you create, the box expands downward automatically. 


Selecting a font and changing its size 


After you create a snippet of text, you can select it for editing in one of three 
ways: 


+ After selecting the Text tool, select the text that you want to edit by 
clicking and dragging to highlight just the desired text. 


+ Using the Pointer tool, double-click the text that you created. Doing so 
activates the Text tool and makes the text available for editing. 


+ Using the Pointer tool, click the text that you created. Doing so selects 
the entire text box. When you edit the text settings in the Property 
inspector, Fireworks applies the changes to all the text in the box. 


After you select text, the Property inspector switches automatically to show 
the available text properties that you can apply to your selected text, includ- 
ing bold, italic, various text alignments, and effects like drop-shadow and glow. 


You can change your text to a different font in one of two ways: 


+ Choose a font from the drop-down list (the list displaying the default 
font, Arial on the PC and Geneva on the Mac) in the Property inspector. 
The drop-down list displays all the fonts that you have in your machine 
in alphabetical order. As you scroll through the list, the list displays the 
name of the selected font using the font face itself, so you can quickly 
see what each font looks like. Figure 3-2 shows you what the Property 
inspector looks like when you select text. 


+ Choose Text™Font and then select from the list of fonts that appear on 
the screen. 


If you have tons of fonts and your favorite is way down on the list, you can 
skip to it by clicking in the scrolling drop-down list in the Property inspector 
and typing the first letter of the font name on your keyboard. This action 
jumps you to the first font available with that letter. You can then press the 


Figure 3-2: 
The 
Property 
inspector 
puts all your 
text options 
within one 
click. 








Figure 3-3: 
Use the 
handy size 
slider to set 
your font 
size. 
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down-arrow key to find the font that you’re looking for. Press Enter to apply 
the font to the selected text. Unfortunately, the Mac version doesn’t have this 
feature. 
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After you select a font, you can change its size in no time at all. You can 
change a font size in Fireworks in one of two ways: 


+ Use the Size field: The Property inspector contains a field indicating the 
current size of the font that you’re working with. To change the text size, 
simply type in the text field the point size that you want and press Enter. 


+ Use the Slider: Click and hold the arrow at the right of the Size field and 
then slide it up. The text size increases. Similarly, slide it down and the 
text size decreases (see Figure 3-3). 
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Adding a little color 


By default, all text in Fireworks is black. Although black is handy and always 
in fashion, you don’t want to use it for every occasion. You can pretty easily 
change the font color in Fireworks. To change your color the basic way, just 
follow these steps: 
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Figure 3-4: 
Use the 
eyedropper 
to choose a 
color in the 
color picker. 


ar 





1. Select the Text tool and place the cursor next to the first word that 


you want to change the color of. Click and drag until you select all the 
text that you want to make a different color. 


Alternatively, if you’re using the Pointer tool, click the text to select it. 


. Click the Color box to open the color picker. 


The color picker appears on-screen, showing only Web safe colors by 
default (see Figure 3-4). Your mouse pointer changes to an eyedropper 
when you roll over the palette. (You can read more about the System 
Color Picker, which offers other color options, later in this section.) You 
can move the eyedropper anywhere within the Fireworks window. 





Fil Options... 





. Using the eyedropper, click a color. 


The square now becomes the color that you select for your text. More 
importantly, your selected text becomes that color, as well. If the text 
appears to be a different color than the square, you still have the text 
highlighted. Click anywhere on the canvas or click any tool to deselect 
the text and see the color applied to the text. 


If you don’t feel like moving your mouse all the way to the bottom of the 
screen, you can also change the color of your font by using the Colors area 
of the Tools panel or by using the new Colors panel. They work the same 
way as the color picker in the Property inspector, so feel free to use whichever 
one you find most convenient. 


The color picker contains a number of different views. The default view uses 
Web safe color cubes. You can switch views by clicking the right-facing trian- 
gle in the top-right corner of the color picker and then selecting a new view 
from the list that appears. The other views include the following: 


+ Swatches panel: Displays your saved colors. If you have any saved colors, 


they show up here. If not, the panel displays the Web safe palette. 


+ Continuous tone: Shows the colors as they move from lighter to darker 


left to right across the color picker. You can find all these colors in the 
Web safe color cubes, just arranged differently. 


Figure 3-5: 
The System 
Color Picker 
offers more 
options than 
the color 
picker. 
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+ Windows OS: Shows the 217 Web safe colors that are also the Windows 
operating system colors. 


+ Mac OS: Shows the system colors for the Mac operating system. 


+ Grayscale: Provides a range of grays from light to dark. Be warned 
though, only six grayscale colors are Web safe! 


What if the color you want isn’t in the Web-safe palette? Well, thankfully, 
Fireworks gives you a number of different coloring options. On the top of 

the palette, you can find the System Color Picker (the color wheel near the 
middle of the top of the color picker). You can click the System Color Picker 
to see your other color options. The System Color Picker offers several other 
ways for you to choose a color (as you can see in Figure 3-5): 


+ RGB values: Red, Green, and Blue make up all the colors that you can 
see on-screen. 


+ Hue, Saturation, and Luminosity values: A different way of telling the 
computer how to combine red, blue, and green. 


+ The color matrix: A visual representation of the Hue (the horizontal 
axis), Saturation (the vertical axis), and Luminosity (the extra strip on 
the right) values. 
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Using the color matrix gives you the most flexibility in choosing a color 
because you can visually pick precisely the color that you want. Here’s how 
you use the color matrix to change the color of selected text: 


1. Select the Text tool and place the cursor next to the first word that 
you want to change the color of. Click and drag until you select all the 
text that you want to make a different color. 


Alternatively, if you’re using the Pointer tool, click the text to select it. 
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2. Click the Color box to open the color picker. 


3. From the top middle of the color picker, select the System Color 
Picker. 


The Color dialog box appears, as you can see in Figure 3-5. 


4. Place your cursor over the color that you want and click the mouse 
button. 


You see a cross hair where you click. At the center of the cross hair, you 
can see the color that you choose. The higher you go in the matrix, the 
more saturated the color becomes. If you want to make the color darker 
or lighter, click the shade that you want in the Luminosity bar next to 
the matrix, or click and move the slider to the right of the shade. At this 
point, you still haven’t changed the color of the text on the canvas. 


5. Click OK to apply the color to your text. 
The text you selected on the canvas changes to the color that you 
selected in Step 4. 


If you want to use a color frequently, click the Add to Custom Colors button on 
the lower right after you select your custom color. That way, whenever you 
need to use that color, you can click its square in the color picker instead of 
having to remember its RGB values or trying to find it in the color matrix. 


Manipulating text 

After you type or paste your text, you can change anything about it, from its 
color to its position on the page. You change the color exactly the same way 
that you apply the color in the first place, and you can just as easily edit, 
move, and delete text. 


Inserting text 
To insert text, just follow these steps: 
1. Choose the Text tool from the Tools panel. 
An |-beam-shaped cursor appears. 
2. Click the place in the text box where you want to add text. 
A blinking vertical line indicates where you will insert your new text. 


3. Start typing or paste text (Ctrl+V) that you have copied from elsewhere. 
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Deleting text 

To delete text, do the following: 
1. Choose the Text tool from the Tools panel. 
2. Click the place in the text box where you want to delete text. 
3. Click and drag over the text you want to delete. 


The selected text is highlighted, as you can see in Figure 3-6. 
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To delete an entire selection of text, select the Pointer tool and then click 
the text box that you want to delete. After you select the text box, press the 
Delete key to delete the text box and everything in it. 


If you realize that you deleted more than you wanted to, or deleted the wrong 
chunk of text, use the keyboard shortcut Ctrl+Z to undo the deletion. 
Replacing text 


To replace text, just follow these steps: 


1. Choose the Text tool from the Tools panel. 


2. Click the place in the text box where you want to replace text. 
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3. Click and drag over the text you want to replace with other text. 
The selected text is highlighted, as you can see in Figure 3-6. 


4. Start typing or press Ctrl+V to paste in text that you copy from 
elsewhere. 


Moving text 
To move text within a text box, do the following: 
1. Choose the Text tool from the Tools panel. 
2. Click and drag over the text you want to move. 
The selected text is highlighted, as you can see in Figure 3-6. 
3. Choose Edit™Cut or press Ctrl+X to cut the text. 
4. Click where you want to drop in the cut text. 
A blinking vertical line indicates where you will insert your text. 
5. Choose Edit™Paste or press Ctrl+V to paste the text at the insertion 
point. 


To move a text box, follow these steps: 


1. Choose the Pointer tool. 
2. Place the cursor anywhere over the text box. 
An outline appears in red to indicate that your cursor is over the text box. 


3. Click anywhere within the text box and, with the mouse button held 
down, drag to move the text box. 


Fireworks shows you where you're moving the text. 


4. Release the mouse button when you have the top left of your text 
where you want it. 


The text relocates. 


Changing text box dimensions 

After you move your text box, you may find that the text is too wide, too 
narrow, too long, or too short to fit in its new position in your design. Do 
you have to change your text? Not necessarily. Fireworks lets you adjust the 
dimensions of your text box, which may be all that you need to do. 
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To change the width or length of a text box, just follow these steps: 


— 


. Choose the Pointer tool. 


. Place the cursor anywhere over the text box. 


An outline appears in red to indicate that you have rolled the cursor 
over the text box. 


. Click anywhere within the text box to select it. 


The red outline changes to blue to indicate that you have selected the 
entire text box. 


. Place the Pointer over one of the resize handles (the squares in the 


middle of the right-hand or left-hand side, which allow you to change 
the width of the box, and the squares in the corners, which allow you 
to change the width and height at the same time). 


The Pointer (the black arrow) automatically changes to the Subselection 
tool (the white arrow). 


. Click a resize handle and drag the box to the width or length that 


you want. 


. Release the mouse button to see the change. 


If you widen your text box, Fireworks automatically shortens it. If you 
make your text box narrower, on the other hand, Fireworks makes the 
text box longer. If you drag the box longer than it needs to be to hold the 
text, the bottom of the box snaps to the lowest point to which your text 
reaches at the width that you drag the box to. 


Aligning text along a path 

Graphic text in Fireworks doesn’t have to conform to the straight and 
narrow — it can hug any curve like a fancy sports car. To align a block of text 
to a vector path (see the section “Working with Vector Shapes,” later in this 
chapter, for info on vector shapes, paths, and strokes), simply follow these 
easy steps: 


1. 


Select the text block and Shift+Click the shape or path. 


Both the text and path have light blue outlines that show you’ve 
selected them. 


. Choose Text™Attach to Path or use the key command Ctrl+Shift+Y. 


The text conforms to the path or shape. The path loses its stroke attrib- 
utes, and any attributes that you attach to the path after aligning the 
text (like color, shadows, and so on) are applied to the text, not the path. 


After you have attached text to a path, you can edit the path, and the text 
follows the edited path. To detach text from a path, simply choose Text 
Detach from Path. 
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Working with Vector Shapes 


Fireworks gives you two ways to draw on your Canvas: 


+ Vector mode: Uses points, lines, and shapes to define image elements 


+ Bitmap mode: Uses pixels to define image elements 


Each method has advantages and disadvantages, and which mode you use 
depends on what you want to do. 


If you want to make a shape that you can easily tweak, resize, or export to 
Macromedia Flash or FreeHand later, you want to work in vector mode. When 
you make a simple vector shape in Fireworks, you actually create a mathe- 
matical model of a series of points connected by lines. By adding, subtract- 
ing, or moving points, you can change the shape without changing any of its 
other qualities, such as the line (stroke), width, and texture. 


Because a simple vector shape is more a mathematical description of an 
image than an actual image, it has a small data size. Not only that, but a 
square of a particular color, stroke width, and gradient fill is basically the 
same data size whether it’s 10 x 10 pixels or 1000 x 1000 pixels on-screen. 
That size consistency becomes important in Macromedia Flash, in which 
smaller image data sizes mean faster downloads. 


The basic building block of a shape is the path. The path by itself is just a 
set of coordinates; in order to make the path appear, you need to apply a 
stroke. A stroke in Fireworks is like a brushstroke in a painting. Stroke prop- 
erties include width, texture, and color. The thicker the brush, the thicker 
the stroke that it makes. Of course, in Fireworks, you can make strokes with 
the Pencil and Pen tools, and with other tools, as well. 


Read on to discover how to create and edit vector shapes. 


Making a good old-fashioned line 


When you first create a line using the Line tool, it’s a straight line (which can 
be vertical, horizontal, or diagonal). To create a line in Fireworks, just follow 
these steps: 

1. Select the Line tool from the Vector part of the Tools panel. 

2. Place your cursor over the spot where you want your line to start. 


When you have your cursor over the canvas, the cursor becomes a cross 
hair. The center of that cross hair is your point of contact with the canvas. 


3. Click where you want your line to start and, holding the mouse button 
down, move your cursor to where you want your line to end. 


4. Release the mouse button. 


Figure 3-7: 
Selecta 
stroke 
option from 
the Property 
inspector. 
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By default, the stroke of your line is 1 pixel in width. 


You can access dotted and dashed line stroke options, as well as other 
options, in the Stroke Category pop-up menu in the Property inspector, as 
you can see in Figure 3-7. 
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If you hold down the Shift key while you draw a line, you restrict the angle of 
the line to 45-degree increments. 


Making simple shapes 

Fireworks has easy-to-use tools for creating rectangles (including squares), 
ovals (including circles), and polygons. The tools for making all these shapes 
are grouped with the Rectangle tool in the vector section of the Tools panel. 
When you click the Rectangle tool and hold down the mouse button, a pop- 
up menu displays three basic tools at the top: 


+ The Rectangle tool: Use this tool to create squares and other rectangles. 


+ The Ellipse tool: Use this tool to create round shapes like circles and 
other ovals. 
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Figure 3-8: 
Making a 
rectangle 


shape. 
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+ The Polygon tool: Use this tool to create many-sided shapes (up to 360- 
sided). Use the Property inspector to set the number of sides before you 
draw on the canvas. The slider includes values from 3 to 25; for values 
greater than 25, you need to type a number in the field. By default, the 
Polygon tool creates pentagons. Add three points and you have an octa- 
gon, or delete two points to get a triangle. 


See the section “Making complex shapes,” later in this chapter, for informa- 
tion on the other options in the Rectangle tool pop-up menu. 


To make a rectangle, follow these steps: 


1. Select the Rectangle tool from the Vector section of the Tools panel. 


2. Place your cursor over the point on the canvas where you want the 
top-left corner of your rectangle. 


The cursor becomes a cross hair. 


3. Click and drag to the spot where you want the bottom-right corner of 
the rectangle, as you can see in Figure 3-8. 


To create a square, hold down the Shift key as you drag. 
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4. Release the mouse button. 


The shape appears on the canvas. 
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To make an oval, follow these steps: 


1. 


Click on the Rectangle tool in the Vector section of the Tools panel 
and hold the mouse button down until the pop-up menu with the 
Ellipse tool appears. 


. Place the cursor over the Ellipse tool and release the mouse button. 


The Ellipse tool is selected. 


. Place your cursor over the point on the canvas where you want the 


oval. 


Your cursor becomes a cross hair. 


. Click and drag to create the oval. 


To create a circle, hold down the Shift key as you drag. 


An oval doesn’t have corners, so you may not be able to get precise place- 
ment when you make the shape. But you can easily move the shape, as we 
describe in the “Editing, moving, and deleting shapes” section, later in this 
chapter. 


You can make an equilateral polygon (a shape in which all sides have equal 
lengths) by following these steps: 


1. 


Click on the Rectangle tool in the Vector section of the Tools panel and 
hold the mouse button down until the pop-up menu with the Polygon 
tool appears. 


. Place the cursor over the Polygon tool and release the mouse button. 


The Polygon tool is selected. 


. To the right of the Property inspector, type the number of sides you 


want the polygon to have, or use the slider next to the Sides text field 
to set the number of sides. 


By default, the polygon is five-sided. If you set the number of sides to 3 
rather than 5, you draw a triangle. Set the number of sides to 6 and you 
draw a hexagon. You can make a shape with up to 360 sides — just don’t 
expect us to know what you call a polygon with 360 sides! 


. Place your cursor over the point on the canvas where you want the 


shape. 


Your cursor becomes a cross hair. 


. Click and drag to create the polygon. 


The Property inspector changes to give you access to various properties 
of the polygon, including fill options, stroke options, and effects. 
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Making complex shapes 
You can make complex shapes simply by choosing them directly from the 
Rectangle tool’s Auto Shapes pop-up menu: 


+ 


Arrow 

Beveled Rectangle 
Chamfer Rectangle 
Connector Line 
Doughnut 

L-Shape 

Pie 

Rounded Rectangle 
Smart Polygon 
Spiral 


++ 4+ 4444+ 4 + 


Star 


You can also create an Auto Shape by selecting it from a drop-down list in 
the new Auto Shape Properties panel. And when you have an Auto Shape 
selected on the canvas, you can change many of its settings in the Auto 
Shape Properties panel. 


If you can’t find the kind of shape that you want to make in the Vector Shape 
tool pop-up menu, you can make a custom free-form shape. Believe it or not, 
you can just as easily make odd shapes as regular ones, and you may have 
more fun doing it! 


The main tool that you use to create complex shapes is the Pen tool, which 
you can find in the Vectors section of the Tools panel. Like the Rectangle 
tool, the Pen tool comes with some variations, which you can access by 
clicking and holding the mouse button down on the Pen tool. The pop-up 
menu for the Pen tool displays the following variations: 


+ The Pen tool: Use the Pen tool to place points on the page; Fireworks 
connects the dots for you. 


+ The Vector Path tool: Use the Vector Path tool to draw as you do with a 
felt-tip marker. You can manipulate the path in ways that you can’t if you 
use a bitmap tool (or a real felt-tip marker) — see the section “Editing, 
moving, and deleting shapes,” later in this chapter. 


+ The Redraw Path tool: Use the Redraw Path tool to change the length or 
shape of a path that you’ve already created. 
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To make a free-form shape with straight lines, follow these steps: 


1. Select the Pen tool from the Vector section of the Tools panel. 


. Place the cursor over the canvas. 


Your cursor becomes a fountain pen. 


3. Click to make your starting point. 


4. Move your cursor and click to create a second point. 


Fireworks connects the dots with a straight line. 


. Move your cursor and click to create a third point, and, if you want, a 


fourth, fifth, tenth, or one-hundred-forty-second point. 


. If you want a closed shape, click again on your starting point to close 


the shape. Otherwise, double-click the end point to make an open 
shape. 


You may initially have some problems making curved lines with the Pen tool. 
If you know a few things about the Pen tool, you can much more easily use 

it to make curved lines. First of all, you can make two kinds of points with 
the Pen tool. Which kind of point you make determines whether the line con- 
necting the dots is straight or curved: 


+ 
+ 


Corner points: These points anchor straight lines. 


Curve points: These points anchor curved lines. 


If you simply click in various spots to make the shape, you automatically make 
corner points. To make a free-form shape with curved lines, like the one in 
Figure 3-9, do the following: 


1. 
2. 


Select the Pen tool from the Vector section of the Tools panel. 
Place the cursor over the canvas. 


Your cursor becomes a fountain pen. 


3. Click to make your starting point. 


4. Move your cursor and click a second point. Keeping the mouse button 


held down, move your cursor. 


Point handles (solid circles at both ends of a line that has the selected 
point in the middle) appear, which tells you that you have made a curve 
point. As you move the mouse, Fireworks previews the curve between 
the first and second points. 


. Release the mouse button to make the curve. 


Fireworks joins your first and second points. 
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Figure 3-9: 
Making a 
complex, 
curved 
shape. 


6. Move your cursor and click and drag to create as many curved lines 
as you want. 


7. If you want a closed shape, click again on your starting point to close 
the shape. Otherwise, double-click the end point to make an open 
shape. 





> 











Editing, moving, and deleting shapes 


You can alter a simple shape nearly as easily as you can make a simple shape. 
If you make a shape using any of the tools grouped with the Rectangle, Ellipse, 
or Polygon tool, Fireworks thinks of the shape as a group of points. If you 
want to edit the shape, first you need to ungroup the points so you can 
move them. 


To change the shape of a straight-sided simple shape (a shape with nothing 
but corner points, like a rectangle), follow these steps: 


1. Select the Subselection tool (the white arrow) from the top of the Tools 
panel. 

2. Click anywhere on the line defining the shape. 
All the points, and the guide lines connecting them, highlight. 


3. Choose Modify™Ungroup or use the keyboard shortcut Ctrl+Shift+G to 
ungroup the points. 


The shape remains selected. 
4. Click and drag any point in the shape to the new location that you want. 


You can also delete a point by clicking it and pressing the Backspace or 
Delete key. 


ING) 
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If you want to edit a complex shape (like the one in Figure 3-9), you can use 
the Subselection tool to alter any of the curves: 


1. Select the Subselection tool (the white arrow) from the top of the Tools 
panel. 

2. Click anywhere on the line defining the shape. 
All the points, and the guide lines connecting them, highlight. 


3. If the shape is grouped, choose Modify~Ungroup or press 
Ctrl+Shift+G to ungroup the points. 


When points are grouped, they’re locked together and can’t be manipu- 
lated individually. 


4. Click and drag a curve point to its new location or click a curve point 
to make it active, and then click and drag one of the point handles to 
change the shape of the curve. 


Moving a shape is a piece of cake. Here’s how: 


1. Select the Pointer tool (the black arrow) from the top of the Tools panel. 


2. Click anywhere on the line defining the shape and, keeping the mouse 
button held down, drag the shape to the location that you want. 


You can also use the Subselection tool to move a shape, but you have to be 
careful not to click a handle. If you click and drag a point handle, you move 
the point rather than the whole shape. If you change the shape by mistake, 
press Ctrl+Z to undo the change. 


You can delete a shape very simply. To delete a shape, do the following: 
1. Select the Pointer tool (the black arrow) or the Subselection tool (the 
white arrow) from the top of the Tools panel. 
2. Click anywhere on the line defining the shape. 
3. Press the Delete key or Backspace. 


If you want to cut the shape and paste it somewhere else (in your current 
document or in a different document), use the key command Ctrl+X to 
remove the shape and Ctrl+V to paste it in your desired new location. 


Splitting shapes 

If you ever want to split one shape into two shapes, you can call upon the 
services of the Knife tool. You have access to the Knife tool only when you 
select an ungrouped shape. When you don’t have an ungrouped shape 
selected, the Knife tool is grayed out in the Tools panel. 
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Figure 3-10: 
Splitting a 

square into 
two pieces. 





ar 


To split a shape, follow these steps: 


1. Select the Pointer tool (the black arrow) from the top of the Tools panel. 
2. Click anywhere on the line defining the shape that you want to split. 


All the points, and the guide lines connecting them, highlight. Just as 
importantly, the Knife tool in the Vector section of the Tools panel 
becomes available. (If the Knife tool remains grayed out, press Ctrl+ 
Shift+G to ungroup the shape and make the Knife tool available.) 


3. Select the Knife tool from the Vector section of the Tools panel. 


When you move your cursor over the canvas, your cursor becomes a 
blade. 


4. Click and drag the cursor over the guide lines where you want the 
shape to split, as you can see in Figure 3-10. 


New points show where you made the cut. You now have two shapes. If 
you want to move or edit either of the new shapes, select the shape that 
you want with the Subselect tool. 














If you hold down the Shift key while dragging, you can constrain the split to 
45-degree angles. 


Adding a little color to your shapes 

You can think of your shapes as having two parts: the path that defines the 
outside (which can have a stroke or not) and the whole of the inside (which 
can be empty or filled). The most basic stroke for a shape is a solid color; 
likewise, the most basic inside for a filled shape is a solid color. 
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You can get pretty fancy with both strokes and fills (adding gradients, tex- 
tures, and more, which you can read about in Book III, Chapter 4). However, 
we start with the basics: adding solid colors to strokes and fills. 


Adding color to the stroke 

The default color of strokes in Fireworks is black. So when you add color to 
the stroke, you’re really changing the stroke’s color from black to the color 
that you choose. 


To add or change the color of your stroke, just follow these steps: 


1. Select the Pointer tool (the black arrow) or Subselection tool (the white 
arrow) from the Tools panel. 


2. Click anywhere in the stroke. 
The stroke is highlighted to show that you selected it. 


3. Click the color box next to the Pencil icon in the Stroke part of the 
Property inspector. 


The pointer assumes the shape of an eyedropper, and the Fireworks color 
picker appears. You can choose a color from the color picker or place the 
eyedropper anywhere in the Fireworks window to select a color. 


4. Click to select the color that the tip of the eyedropper is over. 


The stroke changes color. To find out more about the color picker, see 
the “Adding a little color” section, earlier in this chapter. 


If your stroke is only 1 pixel wide, the highlight obscures the line, and you 
can’t see your change immediately. Don’t worry, though. Just click anywhere 
on the canvas except the shape that you just changed to deselect the shape 
so you can see it. (You can also deselect the shape by pressing Ctrl+D.) 


To remove a stroke from a path, select the stroke and choose None from the 
Stroke Category pop-up menu in the Stroke part of the Property inspector. 


Adding a fill color to the inside of the shape 

Fills in Fireworks are empty by default. So when we say that you add color to 
the fill, you really add color to the fill! Just as with adding color to a stroke, 
after you know how to add a color to the fill, you also know how to change 
the fill’s color. 


To add a fill color to your shape, or to change the color that your shape cur- 
rently has, just follow these steps: 
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. Select the Pointer tool (the black arrow) from the Tools panel. 
2. Click anywhere in the shape. 
The stroke highlights to show that you selected the shape. 


3. Click the square with the red line through it (next to the Paint Bucket 
icon) in the Fill part of the Property inspector. 


The pointer assumes the shape of an eyedropper, and the Fireworks color 
picker pops up. You can choose a color from the color picker or place the 
eyedropper anywhere in the Fireworks window to select a color. 


4. Select a color. 


To get the goods on the color picker, see the “Adding a little color” sec- 
tion, earlier in this chapter. 


To remove an existing fill from your shape, follow the steps above, but at 
Step 4, click the Transparent button (the square with the red line through it 
at the top middle of the color picker). 


Want to add a gradient or texture fill to your shape? See the section on 
adding gradients and textures to shape fills and bitmap selections in Book III, 
Chapter 4. 


Working with Bitmap Images 


Vector images are compact and versatile, but they can’t handle the complex- 
ity of photographic images or illustrations. In a photographic image, any given 
pixel can be a completely different color than any of the pixels around it, so 
each pixel’s color must be defined individually. That makes bitmaps big from 
a file-size perspective, but for photos on your Web site, bitmaps are the only 
way to go. 


Fireworks offers an array of useful tools for making and manipulating bitmap 
images. You may use the bitmap tools to draw in Fireworks, but you proba- 
bly want to use bitmap mode mostly when you need to place and tweak 
imported images, like photographs. 


Exploring the bitmap drawing tools 


The main bitmap drawing tools in Fireworks are the Brush and the Pencil 
tools. You can use those tools somewhat interchangeably, and you can use 
them pretty intuitively. Each tool has an amazing amount of flexibility, so 
although you can start drawing with them quickly, it may take some time for 
you to get comfortable with their full capabilities. 
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Most of the flexibility of the tools centers around the concept of tips. In the 
real world, the sharper a pencil, the thinner a line it draws. The thicker the 
end of a paint brush, the thicker the line it makes, and the kind of bristles it 
has affects the texture of the line it makes. The same results hold true with 
the tools in Fireworks. 


In Fireworks, however, each tool has its own unique tip (though all those 
tools are really just variations of the Pencil and Brush tools) to form a stroke 
category, as the following list describes: 


+ Basic: Hard Line, Hard Rounded, Soft Line, Soft Rounded 
Air Brush: Basic, Textured 


Calligraphy: Bamboo, Basic, Quill, Ribbon, Wet 


+ 
+ 
+ Charcoal: Creamy, Pastel, Soft, Textured 
+ Crayon: Basic, Rake, Thick 

+ 


Dashed: Basic Dash, Dash Double, Dash Triple, Dotted, Hard Dash, 
Heavy Dash 


Felt Tip: Dark Marker, Highlighter, Light Marker, Thin 

Oil: Bristle, Broad Splatter, Splatter, Strands, Textured Bristle 
Pencil: 1-Pixel Hard, 1-Pixel Soft, Colored Pencil, Graphite 
Watercolor: Heavy, Thick, Thin 

Random: Confetti, Dots, Fur, Squares, Yarn 


Unnatural: 3D, 3D Glow, Chameleon, Fluid Splatter, Outline, Paint 
Splatter, Toothpaste, Toxic Waste, Viscous Alien Paint 


The tips run the gamut from basic to out-of-this-world. Figure 3-11 shows you 
strokes made with three of the more complex tips. After you’re familiar with 
the default stroke settings, you may want to customize the tips. The Edit 
Stroke dialog box offers you an amazing amount of control over stroke 
parameters like ink amount, flow rate, shape, and sensitivity. To open the 
Edit Stroke dialog box, select Stroke Options from the Stroke Category pop- 
up menu of the Property inspector and click Advanced. See the Fireworks 
Help files for further details, or feel free to experiment! 


If you have a pressure-sensitive graphics tablet, you can set your drawing 
speed and pressure to modify how you place the stroke on the canvas. Just 
enter the settings that you want in the Sensitivity tab of the Edit Stroke 
dialog box. 
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Figure 3-11: 


Lines made 
with some 
of the more 
exotic brush 
stroke tips. 








Air Brush, Textured 





Crayon, Thick 


Unnatural, Viscous 
Alien Paint 








To draw a line or shape using the Brush or Pencil tool, follow these steps: 


1. Select the Brush or Pencil tool from the Bitmap area of the Tools panel. 


When you place your pointer over the canvas, the pointer takes the 
shape of a cross hair. The default tip for the Brush tool is also the 
default tip for the Pencil tool: 1-Pixel Hard. 


2. Select a color from the color picker in the tool’s Property inspector. 


To find out more about the color picker, see the “Adding a little color” 
section, earlier in this chapter. 


3. Select a tip from the Stroke Category pop-up menu. 
Each specialized tip has its own default edge size and texture. 
4. Click and drag on the canvas to make your line or shape. 


The wider the brush, the more pronounced the effect of a fancy tip. See 
Book III, Chapter 4 for more information on customizing the brush edge 
and texture. 


Inserting a bitmap image 

You probably need to insert an existing bitmap image into a Fireworks docu- 
ment often if you’re designing a Web page, whether the bitmaps are pictures 
of your products or pictures of your family. 


To insert a bitmap image into your document, you can drag and drop the 
image onto the canvas from your desktop or a folder, or you can import the 
image. To import a bitmap image, follow these steps: 

1. Choose File>Import or press Ctrl+R. 


The Import dialog box appears. 
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2. Navigate to the folder containing the image that you want to insert. 

3. Double-click the filename, or click the filename and click OK. 
The Import dialog box closes, revealing the canvas. The cursor changes 
into the Insertion Pointer — a right angle. 

4. Align the Insertion Pointer with the top-left point on your canvas 
where you want the inserted image to go. 


5. Click to place the image. 


Selecting areas in a bitmap image 

Fireworks allows you to select areas within an image in several different ways. 
If you’ve used Photoshop before, the Marquee tool, Lasso tool, and Magic 
Wand tool probably look familiar. If you’re new to these tools, the following 
sections give you a brief rundown. 


Using the Marquee tool 
The Marquee tool has two guises, which you can access by clicking and 
holding the Marquee tool until the pop-up menu appears: 


+ The Marquee tool: Use this tool to make rectangular selections. 


+ The Oval Marquee tool: Use this tool to make oval-shaped selections. 
To select a rectangular or oval part of your bitmap, simply follow these steps: 


1. Select the Marquee tool or the Oval Marquee tool from the Bitmap 
part of the Tools panel. 


When you move your pointer over the canvas, your pointer becomes a 
cross. 


2. Place the center of the pointer over one corner of the area that you 
want to select. 


3. Click and drag diagonally over the area that you want to select. 


A flashing marquee marks the selected area — the marquee is rectangu- 
lar if you selected the Marquee tool and oval if you selected the Oval 
Marquee tool. 


You can convert any vector shape on the canvas to a marquee by selecting 
it and choosing Modify™Convert Path to Marquee. Then just select an edge 
style and click OK. The path becomes a marquee. Depending on how you 
have your preferences set, the path itself may disappear from the canvas 
(see Book III, Chapter 1 for details on setting your Preferences). 
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Using the Lasso tool 


The Lasso tool has two guises, which you can access by clicking and holding 
the Lasso tool until the pop-up menu appears: 


+ The Lasso tool: Use this tool to make a free-form selection area by 
“drawing” the area. 


+ The Polygon Lasso tool: Use this tool to select a polygonal area by click- 
ing points on the perimeter of the area. 


To select an irregular area of your bitmap, follow these steps: 


1. Select the Lasso tool from the Bitmap part of the Tools panel. 


When you place your pointer over the canvas, the pointer becomes a 
lasso. 


2. Place the bottom tip of the pointer over the spot on the canvas where 
you want your selection to start. 


3. Click and drag to create an outline of the area you want to select, as 
Figure 3-12 shows you. 


You have to close the outline to make the selection. When you have your 
pointer over the spot where you started your selection, a little filled 
square appears at the bottom right of the pointer. Click to close the 

The Lasso 


selection shape. 
tool allows al 
you to 
select an 
irregularly 
shaped 
area. 


To select a polygonal area of your bitmap, follow these steps: 





Figure 3-12: 














1. Select the Polygon Lasso tool from the Bitmap part of the Tools panel. 
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When you place your pointer over the canvas, the pointer becomes a 
lasso. 


2. Place the bottom tip of the pointer over the spot on the canvas where 
you want your selection to start. 


3. Click to establish the first point of the area that you want to select. 


4. Move your cursor to the second point of the area that you want to select 
and click. 


Fireworks connects the points with a straight line. 


5. Place your cursor and click all points making up the polygonal 
selection. 


You have to close the outline to make the selection. Double-click to close 
the selection from the last-placed point to the first-placed point. Or, when 
you have your pointer over the first placed point (a little filled square 
appears at the bottom right of the pointer), click to close the selection 
shape. 


Using the Magic Wand 

The third bitmap selection tool is known as the Magic Wand tool. The Magic 
Wand tool selects an area of solid color or of similar colors. (You can set 
the wand’s sensitivity level so it selects areas of more similar or less similar 
colors.) 


To select a contiguous area of similar color in your bitmap, follow these steps: 


1. Select the Magic Wand tool from the Bitmap section of the Tools panel. 


When you place your pointer over the canvas, the pointer takes the form 
of a magician’s wand. 


2. Place the pointer over the part of the image that you want to select 
and click. 


A blinking marquee marks off the selected area. If you select too much 
area, you need to make the wand more sensitive. Set the Tolerance level 
in the Property inspector to a lower number. If you don’t select enough 
area, set the Tolerance level to a higher number (up to 255, at which set- 
ting you probably select your entire bitmap). 


Editing bitmaps: The basics 

Fireworks allows you to manipulate bitmaps in all kinds of crazy and inter- 
esting ways, but naturally, it also allows you to do common everyday image- 
altering, as well. 
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Perhaps the most basic bitmap editing tasks that you can do are cropping, 
resizing, rotating, and distorting an image, which you can read about in Book 
II, Chapter 4, along with basic filtering operations, like Blurring, Sharpening, 
and making color adjustments. 


No introductory chapter on bitmap editing is complete, though, without a 
quick look at the Eraser tool. As you may expect, the Eraser tool is the anti- 
brush. The Brush tool adds a line, shape, or pattern to a bitmap. The Eraser 
tool removes a line of pixels from a bitmap. 


To erase pixels from your bitmap, follow these steps: 


1. Select the Eraser tool from the Bitmap part of the Tools panel. 


The Eraser tool defaults to a circle, though you can make it square- 
shaped by clicking the square shape in the Property inspector. 


2. In the Property inspector, type a size in the Size text field or use the 
handy slider to set the width of the Eraser. 


The range goes from 1 to 100. 
3. Select the circle shape or square shape by clicking on one or the other. 
4. Set the Edge by typing a number or using the slider. 


The range goes from 0 to 100. Setting to 0 gives a hard edge to your 
Eraser (it removes a single pixel at a time), and setting to 100 gives a 
fuzzy edge to the erased area. 


5. Set the Opacity of the Eraser by typing a number or using the slider. 


The range goes from 1 to 100 percent. If you set the Opacity to 100 per- 
cent, the Eraser clears all the erased pixels entirely (except at the edges, 
if you set an edge of greater than 0). If you set the opacity to less than 
100 percent, the Eraser creates a translucent effect, allowing whatever 
you have under the bitmap to show through. The lower the opacity set- 
ting, the more the image underneath shows through. 


6. Click and drag on your image with the Eraser tool to rub out those 
unwanted pixels. 


The pixels disappear as you drag the cursor over them. 


Chapter 4: Transforming Text, 
Shapes, and Images 


In This Chapter 


Scaling your images 

 Distorting and skewing text and graphics 
Rotating and flipping graphics and text 
Adding gradients, textures, and patterns 
¥ Using filters 


Í the course of laying out the pages of your Web site, you may want to 
change the size or color of an image so that it fits more naturally into 
your design. In this chapter, we show you how to manipulate images, or 
parts of images, to create effects from subtle to extreme. 


Scaling Graphics 


When we talk about scaling graphics, we’re talking about changing the size of 
a bitmap or vector shape on the canvas, not changing the size of your over- 
all image (that is, everything on the whole of your canvas). To find out how 
to change the canvas size, see Book III, Chapter 2. You can change the size of 
an image element or selected part of an image element in two ways: 


+ Use the Scale Transformation tool: Click and drag the image object or 
selection. Use this option if you want to figure out the proper size of the 
image by eyeballing it. 


+ Change the numbers in the Property inspector: Type numbers in the 
width and height boxes. Use this option if you have exact dimensions in 
mind for your image. 


You can use both methods fairly simply, and you get identical results 
(whether you drag an object to a specific width or type that width into the 
Property inspector, the resized object looks the same). 
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Using the Scale Transformation tool 


You can change the size of an object, either retaining its proportions or dis- 
torting it, by using the Scale tool. To change the size of an object by using 
the click-and-drag method, follow these instructions: 


1. Click the Pointer tool or Subselection tool from the Select section of 
the Tools panel and then click the object you want to resize. 


For more information on selecting image objects or parts of image objects, 
see Book III, Chapter 3. 


2. Select the Scale tool — it looks a bit like a baseball diamond — from 
the Select section of the Tools panel or choose ModifyTransform™ 
Scale. 


A box with eight handles and a center point overlays the selected object. 


You can also select the Scale tool by clicking the arrow next to Transform 
Tools in the Image Editing panel, new to Fireworks 8. 


3. Click and drag one of the handles to scale the object in one of two ways: 


e To scale the object while retaining its proportions: Click one of the 
corner handles (make sure that the cursor looks like a double-sided 
arrow) and drag the object to the desired size. 


e To scale the object and distort its proportions: Click and drag the 
middle handle on either the left or right side of the box around the 
object (make sure that the cursor looks like a double-sided arrow) 
to change the object’s width, or click and drag the center handle on 
either the top or bottom of the box around the object (make sure 
that the cursor looks like a double-sided arrow) to change the 
object’s height. 


By default, Fireworks continues to display the original box around 
the object, but it adds a version of the box with a dotted line to show 
the new dimensions as you drag, as you can see in Figure 4-1. 


When the cursor looks like a three-quarter circle with an arrow, you 
can rotate the image instead of resizing it. See the “Rotating graph- 
ics” section, later in this chapter, for details on rotating images. 


4. Release the mouse button. 
Fireworks redraws the image to your selected size. 
5. Click and drag to reposition the image, if necessary. 


The cursor changes into a four-pointed arrow when you place it over 
the redrawn image, which indicates that you can move the image. (See 
Figure 4-2.) You can remove the transform handles by double-clicking 
the image, which also changes the tool to the Pointer tool. 


Figure 4-1: 
Resizing an 
image using 
the click- 
and-drag 
method. 


Figure 4-2: 
The cursor 
becomes a 
four-pointed 
arrow to 
indicate that 
you can 
move the 
object by 
dragging it. 
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Resizing by entering numerical values 

Sometimes you have a space with a defined width and height into which 
you want to place images of that exact width and height. If the images aren’t 
already sized to fit that space, and you have calculated the exact propor- 
tions or aren’t worried about distorting the images, use the following 
method to resize the images. 


Book III 
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To change the width and/or height of an image by typing in a new value for 
the width and/or the height, just follow these steps: 


1. Using the Pointer tool or Subselection tool, click the object you want 
to resize. 


See Book III, Chapter 3 for more information on selecting image objects 
or parts of image objects. 


2. In the Property inspector, double-click or highlight the number in the 
Width field, as Figure 4-3 shows you, and type in a new number. 


If you can’t see the Width and Height fields, your Property inspector 
may be collapsed. To expand the panel, click the downward-pointing 
arrow at the bottom-right corner of the panel. If you can’t see the 
Property inspector on-screen, press Ctrl+F3 to open it. 











Figure 4-3: — = 
Adjusting btm E 100 [w | Normal x 7) 
the width of = Fiesi 4, 

a selected eae aie 
object. 


3. If you don’t want to change the height, press Enter to implement the 
width change. 


Fireworks redraws the selection at the new width. 


4. If you want to change the height, select the number in the Height field 
and type a new value. 


5. Press Enter or click in another value field. 


Fireworks updates the height of the selection. 


Distorting and Skewing Images and Text 


Changing the width but not the height of an image object, or changing the 
object’s height but not the width, distorts the object along one axis. What if 
you want to stretch one corner of an object but leave the rest of the object 
more or less intact, or perform some other unusual stretching or shrinking? 
You have the Distort and Skew tools at your disposal — they’re just hiding 
behind the Scale tool. To access the Distort and Skew tools, click and hold 
the Scale tool in the Select section of the Tools panel and select one of the 
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tools from the menu that pops up, or select the Scale tool and press Q on 
your keyboard until the tool you want appears. 


What’s the difference between skewing and distorting? Skewing is actually a 
particular kind of distortion: 


+ 
+ 


Distorting: Stretching or shrinking one or more sides of an image object. 


Skewing: Distorting an image object by stretching or shrinking two of its 
four sides while leaving the other two the same, or stretching or shrink- 
ing three of the four sides of the object’s bounding box at once but not 
changing the dimensions of the fourth side. Skewing can create the illu- 
sion of perspective. 


The Distort tool is far more versatile than the Skew tool: 


+ 


+ 


+ 


You can use the Distort tool to resize along one axis, in which case you 
scale the object. 


You can use the Distort tool to stretch or shrink three sides of an object 
at once, in which case you skew the object. 


You can use the Distort tool to create more complex forms of image 
manipulation by both scaling and skewing the object, for example. 


Distorting an image 
To distort an object by using the Distort tool, follow these steps: 


1. 


Click the Pointer tool or Subselection tool in the Tools panel and then 
click the object that you want to distort. 


. Select the Distort tool from the Tools panel or choose Modify 


Transform™Distort. 


If you you want to select the tool from the Tools panel, click and hold on 
the Scale tool in the Select section of the Tools panel and select the 
Distort tool from the pop-up menu. A box with eight handles and a 
center point overlays the selected object. 


You can also select the Distort tool from the Image Editing panel, new to 
Fireworks 8, by clicking the arrow next to Transform Tools and selecting 
Distort from the options that appear. 


. Click and drag any handle. 


By default, Fireworks continues to display the original box around the 
object, but it adds a version of the box with a dotted line to show the new 
dimensions as you drag, as you can see in Figure 4-4. The cursor becomes 
a double-sided arrow as you place it over a center or middle handle. 
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Figure 4-4: 


Distorting 
an image to 
create a 


weird effect. 

















A 
When you try to drag handles too far (if you try to drag a middle-left 
handle above the top-left handle, for example), the dotted line stretches 
to wherever you drag the handle, but when you release the mouse button, 
the image snaps to the farthest allowable point in the direction you 
dragged. In short, a handle can’t cross other handles. 
. Click and drag any other handles. 
You can stretch and squash the image by dragging as many handles as 
many times as you want. 
. Press Enter or double-click anywhere on the canvas. 
Fireworks updates the selection. 
Skewing an image 


To skew an image, follow these simple steps: 


1. With the Pointer tool or Subselection tool, click the object that you 


want to skew. 


. Select the Skew tool from the Tools panel or choose Modify=®> 


Transform™Skew. 


If you want to select the tool from the Tools panel, click and hold on the 
Scale tool in the Select section of the Tools panel and select the Skew 
tool when the pop-up menu displays the Skew and Distort tools. A box 
with eight handles and a center point overlays the selected object. 


You can also select the Skew tool from the Image Editing panel, new to 
Fireworks 8, by clicking the arrow next to Transform Tools and selecting 
Skew from the options that appear. 


ST 


6 
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3. Click and drag any handle: 


e The center handles: On the top and bottom, these handles can skew 
a side of the image left or right. 


e The middle handles: The handles on the left and right can skew a 
side of the image up or down. 


e The corner handles: These handles behave differently, depending on 
if you drag them along the left-right axis or along the up-down axis, 
but no matter which axis you drag along, they spread the selected 
side of the image along that axis. For example, if you select the 
top-left corner and drag up, the bottom-left corner stretches down 
proportionally. 


By default, Fireworks continues to display the original box around the 
object, but it adds a version of the box with a dotted line to show the new 
dimensions as you drag, as you can see in Figure 4-4. The cursor becomes 
a double-sided arrow as you place it over a center or middle handle. The 
arrow indicates in which directions you can drag the handle. 


4. Press Enter or double-click anywhere on the canvas. 


Fireworks updates the selection, the transformation handles disappear, 
and the tool reverts to the Pointer tool. 


Distorting and skewing text 


In Fireworks, you can distort text as easily as you can distort images. To dis- 
tort the text in a text box, while leaving the text editable, just follow these 
steps: 


1. Click the Pointer tool or Subselection tool in the Tools panel and then 
click the text box that you want to distort. 


You can also select the text box using the Text tool, but you can’t distort 
only part of the text in a text box. You can, however, Shift+click two text 
boxes and distort them together. 


2. Select the Distort tool from the Tools panel or choose Modify 
Transform™Distort. 


If you want to select the tool from the Tools panel, click and hold on the 
Scale tool in the Tools panel and select the Distort tool from the pop-up 
menu. A box with eight handles and a center point overlays the selected 
text box. 


You can also select the Distort tool from the Image Editing panel, new to 
Fireworks 8, by clicking the arrow next to Transform Tools and selecting 
Distort from the options that appear. 


3. Click and drag any handle. 
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Figure 4-5: 
Distorting 

a text box 
can give the 
illusion of 
perspective 
to text. 


By default, Fireworks continues to display the original box around the 
object, but it adds a version of the box with a dotted line to show the 
new dimensions as you drag. The cursor becomes a double-sided arrow 
as you place it over a center or middle handle. 


When you try to drag handles too far (if you try to drag a middle-right 
handle above the top-right handle, for example), the dotted line stretches 
to wherever you drag the handle, but when you release the mouse button, 
the image snaps to the farthest allowable point in the direction that you 
dragged. In short, a handle can’t cross other handles. 


. Click and drag any other handles. 


You can stretch, squash, and drag as many handles as many times as 
you want. 


. Press Enter or double-click anywhere on the canvas. 


Fireworks updates the selection, as Figure 4-5 shows you. 








UTTER au 








To skew a text box, follow these simple steps: 


1. Using the Pointer tool in the Tools panel, click the text box. 


You can also select the text box by using the Text tool, but either way 
you can’t distort only a part of the text in a text box. 


. Select the Skew tool from the Tools panel or choose Modify~ 


Transform™>Skew. 


If you want to select the tool from the Tools panel, click and hold on the 
Scale tool in the Tools panel and select the Skew tool when the pop-up 
menu displays the Skew and Distort tools. A box with eight handles and 
a center point overlays the selected text box. 
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sy TO 
& P You can also select the Skew tool from the Image Editing panel, new to 
guno Fireworks 8, by clicking the arrow next to Transform Tools and selecting 
8 Skew from the options that appear. 


3. Click and drag any handle: 


e The center handles: On the top and bottom, these handles can skew 
a side of the text left or right. 


e The middle handles: The handles on the left and right can skew a 
side of the text up or down. 


e The corner handles: These handles behave differently, depending on 
if you drag them along the left-right axis or along the up-down axis, but 
no matter which axis you drag along, they spread the selected side of 
the text along that axis. For example, if you select the top-left corner 
and drag up, the bottom-left corner stretches down proportionally. 


4. Press Enter or double-click anywhere on the canvas. 
Fireworks updates the selection, the transformation handles disappear, 
and the tool reverts to the Pointer tool. 


You can align text along a vector shape or path. See Book III, Chapter 3 to 
find out more about aligning text. 


Rotating and Flipping Graphics and Text 


As is the case with resizing, Fireworks allows you to rotate and flip everything 
on the canvas at once, but it also allows you to select individual graphic ele- 
ments (image objects) and rotate or flip them independently. 


Rotating graphics 


You can rotate a graphic in two ways: 
+ Rotate a preset amount: Fireworks offers a quick way to rotate a graphic 
either 90 or 180 degrees around its center point. 


+ Rotate any amount: You can click and drag to rotate an image around 
its center point, or even move the point and rotate the image around a 
point not at the image’s center. 


To rotate a graphic by 90-degree increments, follow these steps: 


1. Select the object by using the Pointer tool or Subselection tool. 


For more information on selecting image objects or parts of image objects, 
see Book III, Chapter 3. 
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2. Choose how you want to rotate the object: 


e To rotate the object 180 degrees (turning it upside down): Choose 
Modify™Transform™Rotate 180 Degrees. 


e To rotate a graphic 90 degrees clockwise (to turn it sideways to the 
right): Choose Modify®Transform™Rotate 90 Degrees CW, or use the 
key command Ctrl+Shift+9. 


e To rotate a graphic 90 degrees counterclockwise (to turn it side- 
ways to the left): Choose Modify®Transform™Rotate 90 Degrees 
CCW, or use the key command Ctrl+Shift+7. 


Rotating an object freehand requires a couple of extra steps, but it gives you 
much finer control over the degree of rotation. To rotate an object any 
amount around its center axis, just follow these steps: 

1. Select the object by using the Pointer tool or Subselection tool. 


2. Choose Modify™Transform™Free Transform (or Scale, Skew, or 
Distort). 


You can also use the keyboard shortcut Ctrl+T to access the Free 
Transform command. When you're rotating an object, it doesn’t matter 
which tool you choose. 


3. Place your cursor over the canvas. 


The cursor changes into a rounded arrow, as you can see in Figure 4-6. 





Figure 4-6: 
Rotating a 
bowling pin 
image 
object so 
that it 
appears to 
be falling. 
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4. Click and drag the cursor in any direction. 


If you drag down or to the right, the image rotates clockwise; if you drag 
up or to the left, the image rotates counterclockwise. 


If you hold down the Shift key while rotating your graphic, you restrict 
the angle of the rotation to 15-degree increments. 


5. Press Enter or double-click anywhere on the canvas. 


Fireworks updates the selection, the transformation handles disappear, 
and the tool reverts to the Pointer tool. 


Rotating text 
In Fireworks, you can rotate text pretty much like you rotate a graphic. To 
rotate a text box in 90-degree increments, follow these steps: 


1. Click the Pointer tool or Subselection tool in the Tools panel and then 
click the text box. 


You can also select the text box by using the Text tool, but either way 
you can’t distort only a part of a text box. 


2. Choose how you want to rotate the text: 


¢ To rotate the text box by 180 degrees (turning it upside down): Book Ill 
Choose Modify™Transform™Rotate 180 Degrees. 
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e To rotate a text box 90 degrees clockwise (to turn it sideways to 
the right): Choose Modify*Transform™Rotate 90 Degrees CW, or use 
the key command Ctrl+Shift+9. 


e To rotate a text box 90 degrees counterclockwise (to turn it side- 
ways to the left): Choose ModifyTransform™Rotate 90 Degrees 
CCW, or use the key command Ctrl+Shift+7. 
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To rotate text freehand, follow these simple steps: 
1. Use the Pointer tool or Subselection tool to select the text box that you 
want to rotate. 
You can only distort the entire text box. 


2. Choose Modify™Transform™Free Transform (or Scale, Skew, or 
Distort). 


You can also use the keyboard shortcut Ctrl+T to access the Free 
Transform command. When you’re rotating a text box, it doesn’t matter 
which tool you choose. 
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Figure 4-7: 
The left 
image of the 
bowling pin 
has been 
duplicated, 
moved, 

and flipped 
horizontally 
to make the 
image of the 
bowling pin 
on the right. 





3. Place your cursor over the canvas. 
The cursor changes into a rounded arrow. 
4. Click and drag the cursor in any direction. 


If you drag down or to the right, the text box rotates clockwise; if you 
drag up or to the left, the text box rotates counterclockwise. 


5. Press Enter or double-click anywhere on the canvas. 


Fireworks updates the selection, the transformation handles disappear, 
and the tool reverts to the Pointer tool. 


Flipping images 
Fireworks lets you flip images vertically and horizontally. You can do both 
manipulations in a snap. 


To flip an image horizontally (making it a mirror image of what it was origi- 
nally) or vertically (turning it upside down), follow these steps: 


1. Select the object you want to flip. 


2. Choose Modify™Transform™Flip Horizontal to make a mirror image 
of the object; choose Modify~Transform™Flip Vertical to turn the 
object upside down. 


Depending on which choice you make, your selection either flips horizon- 
tally, as Figure 4-7 shows you, or vertically, as you can see in Figure 4-8. 
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Figure 4-8: 
The left 
image of the 
bowling pin 
has been 
duplicated, 
moved, 

and flipped 
vertically to 
make the 
image of the 
bowling pin 
on the right. 











Flipping text 
Fireworks lets you flip text boxes vertically and horizontally. Both manipula- 
tions are a piece of cake. Book Ill 
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Follow these steps to flip a text box horizontally (making it a mirror image of 
what it was originally) or vertically (turning it upside down): 


1. Select the text box that you want to flip with the Pointer tool or 
Subselection tool. 


You can also select the text box using the Text tool, but either way you 
can’t distort only a part of a text box. 


2. Choose Modify>Transform>Flip Horizontal to make a mirror image 
of the text box; choose Modify>Transform>Flip Vertical to turn the 
text upside down. 
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Your selection flips horizontally or vertically. 


Adding Gradients, Textures, and Patterns 
to Shape Fills and Bitmap Selections 


In Book III, Chapter 3 we show you how to fill a vector shape with a color. In 
this section, you find out how to treat your shape to a fancier filling: a gradi- 
ent or pattern, and/or a texture. Gradients, patterns, and textures can add 
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the illusion of depth to your images. They also increase the file size of your 
images because they’re difficult to compress, so use them sparingly. 


Introducing gradients 


A gradient is a subtle blend of one color into another. A classic example of a 
gradient in nature is a sky at sunset (or sunrise, if you ever wake up that 
early). Near the horizon, the sky is a deep, bright orange; straight up, the sky 
is a dark blue. In between those two colors is a bunch of transitions: from 
bright orange to pale orange to pale blue to dark blue. The transitions are so 
subtle, it’s difficult to say where one color leaves off and another begins. 
That’s a gradient. 


Fireworks ships with a wonderful array of useful gradient patterns, which 
you can access through a pop-up menu in the Property inspector: 


+ Linear + Starburst 
+ Radial + Folds 

+ Rectangle + Ellipse 
+ Cone + Bars 

+ Contour + Ripples 
+ Satin + Waves 


Although the black-and-white of this printed page may not quite do these gra- 
dients justice compared to what they look like in full color, you can still get a 
pretty good idea of the variety of the gradients by checking out Figure 4-9. 
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You can choose any colors to make your gradients, but Fireworks also has 
the following handy preset gradient options: 


+ 


4+ +44 4 + 


Blue, Yellow, Blue 
Cobalt Blue 
Copper 

Emerald Green 
Pastels 

Red, Blue 

Red, Green, Blue 


+ Silver 

Spectrum 

Violet, Orange 
White, Black 
Black, White 
Blue, Red, Yellow 


+++ + 4+ 


To add a preset gradient fill to a vector shape, follow these steps: 


— 


. Select the Pointer tool or Subselection tool and click the shape. 


. Click and hold the Fill Categories box next to the Paint Bucket icon in 


the Property inspector. 


3. Choose Gradient. 


4. Select a gradient 


type from the menu, as you can see in Figure 4-10. 


The default colors for gradients are black and white. If you want those 
colors for your gradient, congratulations! You’re done! If not, continue to 


the next step. 
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5. Click the Fill Color box next to the Paint Bucket icon in the Property 


inspector. 


A pop-up window, like the one in Figure 4-11, appears: 


e At the bottom of the pop-up window, you can see a preview pane, 
which shows what the gradient pattern will look like when you apply 
it to the shape. (Figure 4-11 shows the selected pattern Cone.) 
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e In the middle of the window lies the Preset drop-down list, from 
which you can choose preset colors for your gradient. 


e At the top of the window, you can find a simpler preview strip that 
shows color but not pattern information. Above and below that strip 
are sliders. The sliders above give you control over the opacity of 
each color in the gradient; the sliders below give you control over 
the amount of each color in the gradient. 


Figure 4-11: 
The gradient 
pop-up 
window 

has controls 
for color 
and opacity, 
a list of 
gradient 
presets, and 
a Preview 
pane. 





6. Select preset colors for your gradient from the Preset drop-down list. 
The preview panes and the selected shape update. 


Different presets have different numbers, or instances, of colors. The 
Cobalt Blue preset, for example, creates its opalescent glow with two 
instances each of three colors. 


7. Click anywhere outside the pop-up window to make the window 
disappear. 


You have to go through a number of steps to add a user-defined gradient fill 
to a vector shape, but you can make the process as simple or complex as 
you want. Just follow these steps: 

1. Select the Pointer tool or Subselection tool and click the shape. 


2. Click and hold the Fill Categories box next to the Paint Bucket icon in 
the Property inspector. 


3. Select a gradient type from the pop-up menu (refer to Figure 4-10). 


The default colors for gradients are black and white. 
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4. Click the Fill Color box next to the Paint Bucket icon in the Property 
inspector. 


A pop-up window appears (which you can see in Figure 4-11). 
5. Click the left color slider, as Figure 4-12 shows you. 


When you place the cursor over a slider, the cursor becomes a solid black 
arrow with no stem. When you click and release the slider, the color 
picker pops up. To get the lowdown on the color picker, see Book III, 
Chapter 3. 


Figure 4-12: 

Left: Picking W% 
the first E 
color for the 
gradient. 
Right: 
Adding a 
color. 
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6. Select a color from the color picker. 
Your cursor is an eyedropper in the color picker. 


7. If you want more than two colors in your gradient, click anywhere 
between the two default color sliders. If not, skip to Step 12. 


Your cursor becomes an arrow with a small plus sign (+) when you move 
it between the existing color sliders. After you click, a new slider 
appears, and your cursor becomes a solid black arrow with no stem 
until you move it off the new slider. 


By default, the color of the new slider is the color in the strip directly 
above where you clicked. 


8. If you want to change the color of the new slider, click it and release. 
When you click and release, the color picker pops up. 
9. Select a color by using the eyedropper. 


10. If you want, move the new color slider left or right to change where 
the new color blends with the other colors. 


11. If you want more than three colors in your gradient, repeat Steps 7 
through 10. 


12. Click the right color slider. 
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«P 


13. 
14. 


15. 


16. 


Select a color by using the eyedropper. 


If you want, move any of the sliders horizontally to adjust where their 
respective colors fall in the gradient. 


If you want, adjust the opacity of the entire gradient or vary the opac- 
ity of different parts of the gradient. 


By default, the opacity of both ends is set to 100 percent (no background 
shows through). You can add and adjust opacity sliders just as you can 
color sliders, and they work in more or less the same way. 


When you click an opacity slider, a pop-up window displays a slider that 
goes from 0 percent at the left (no gradient shows in front of the back- 
ground) to 100 percent at the right. 


Click anywhere outside the pop-up window to make it disappear. 


After you add a gradient fill to your shape, you can rotate, skew, move, and 
change the width of the gradient. See the Fireworks Help files (found in the 
Help menu) for details. 


To remove a color slider or opacity slider (you must have at least two colors 
to make a gradient, of course), click and drag it up out of the gradient pop- 
up window. When you release the mouse button, the slider disappears, and 
you have a less complex gradient fill. 


Follow these steps to add a gradient fill to a bitmap selection: 


1 


. Select the part of the bitmap image that you want to fill with a Tool 


from the Bitmap section of the Tools panel. 


In most cases, the Magic Wand tool works best for this job. For more 
information on selecting parts of image objects, see Book III, Chapter 3. 


. Click the Color box next to the Paint Bucket icon in the Colors section 


of the Tools panel. 


The color picker appears. 


. Click the Fill Options button at the bottom of the color picker. 


A new pop-up window appears in place of the color picker. 


4. Select a gradient pattern from the drop-down list. 


5. Follow Steps 4 through 6 in the steps that describe adding a preset 


gradient fill to a vector shape or Steps 4 through 6 in the steps that 
describe adding a user-defined gradient fill to a vector shape, both 
of which you can find in this section. 


6. Click the Paint Bucket tool. 


7. Click anywhere in the selected area to apply the gradient fill. 
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Adding patterns 

You get Fireworks 8 already loaded with a dizzying array of patterns with 
names like Bubbles, Flames, Moon, and three varieties of Oil Paint. Fireworks 8 
has so many patterns, we don’t have room to list them all here. As with gradi- 
ents, Fireworks shows you a preview of each pattern as you roll over its name 
with your mouse. How do you get to the pattern names? Just follow these 
steps to add a pattern to a vector shape: 


1. Select the Pointer tool or Subselection tool and click the shape that 
you want to add a pattern to. 


2. Click and hold the Fill Categories box next to the Paint Bucket icon in 
the Property inspector. 


3. Choose Pattern. 
4. Select a pattern type from the menu. 


Each pattern appears in a preview window next to its name as you roll 
over the name. When you release the mouse button, the pop-up menu 
disappears and the pattern is applied to your shape. 


Adding textures 

You can add textures to your fills and bitmap selections even more easily 
than you can add gradients. You can even have fills with both a gradient and 
a texture, or with both a pattern and a texture, though combining gradients 
or patterns with textures often diminishes the graphic power of both ina 
given image. 


Fireworks 8 ships with over 50 textures, many of them new or improved. To 
add a texture to a vector shape, follow these steps: 
1. Select the Pointer tool or Subselection tool and click the shape. 


If the shape is transparent, you need to add a color or gradient fill. If the 
shape has a transparent fill (no fill), the Texture list box is inactive. 


2. Click and hold the arrow in the Texture drop-down list. 


You can find this list under the Edge drop-down list in the Property 
inspector. 


3. Select a texture from the drop-down list. 


The drop-down list displays the built-in textures — if you have additional 
textures on your computer, select Other from the list and browse to the 
texture you want to use. 


When you release the mouse button, the texture is applied to the shape 
fill with the default opacity of 50 percent. 
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4. Type a value or drag the slider in the Amount of Texture field (next to 
the Texture drop-down list) to set the opacity of the texture. 


You don’t see any of the texture with a setting of 0, and a setting of 100 
shows the texture at full (100 percent) opacity. 


Adjusting Color Information and More with Filters 


Fireworks has plenty of useful presets and defaults for the novice user, and 
enough tweakability to satisfy most any professional. Pros especially appre- 
ciate the amount of control Fireworks gives users in the area of color adjust- 
ment. Blend modes offer another way to adjust the color information of 
objects; you can find out more about blend modes in Book III, Chapter 5. 


You can accomplish many of the effects that we describe in the following 
sections in two basic ways: 


+ Using Live Effects: This effect acts a bit like putting on a pair of sun- 
glasses to make everything that you look at appear yellow. You don’t 
change the colors of whatever you’re looking at, you put something 
between you and the object to change the appearance of the object. You 
can turn Live Effects off and on without changing the pixels that make 
up the object to which you apply the effects. If you change the object in 
your Web page design later or repurpose it elsewhere, perhaps with dif- 
ferent effects applied, you can use Live Effects to apply nondestructive 
changes to the object in a particular PNG file. Nondestructive means the 
object itself is unchanged, but how the object appears on-screen changes. 
You can apply Live Effects only to whole objects. 


+ Using Filters: You can think of this method as destructive because it alters 
the pixels in the bitmap. This approach is like making everything you see 
yellow by painting everything yellow. Though the process is destructive, it 
isn’t permanent — as long as you have the Undo command available. 


We show you how to use the Filters method in the following sections. For 
more about Live Effects, see Book III, Chapter 7. 


Fine-tuning your colors 


We touch briefly on the color adjustment tools at the end of Book III, Chap- 
ter 3, but here we go into a bit more detail. The color adjustment controls 
available from the Filters menu are as follows: 


+ Auto Levels: In theory, an optimal image has an even distribution of dark 
tones, medium tones, and light tones. Auto Levels sets levels automati- 
cally so that shadows, midtones, and highlights are evenly distributed in 
your image. 
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+ Brightness/Contrast: Controls the overall luminosity of a selection and 
the contrast of color shades within a selection. 


+ Curves: Offers a way to modify very specific colors without affecting 
others. 


+ Hue/Saturation: Controls the tones and intensities of colors within a 
selection. 


+ Invert: Allows you to reverse the colors in a selection to make some- 
thing that looks like a photographic negative. 


+ Levels: Like curves, the levels filter allows you to modify colors, but it 
does so by letting you adjust shadows, midtones, and highlights of one 
of the three individual color channels (red, green, or blue) or all chan- 
nels together. 


To change the brightness or contrast of a graphic or selection, just follow 
these steps: 


1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 
2. Choose Filters®Adjust Color™Brightness/Contrast. 


Book Ill 
A dialog box with separate sliders for brightness and contrast appears. Chapter 4 


3. If you want to lighten or darken your selection, click and drag the 
Brightness slider. 


The default position is at the center. You can drag left down to —100 units 
to darken the selection, or you can drag right up to 100 units to lighten 
the selection. If the Preview check box is selected, as it is by default, you 
can see the change to your selection when you release the mouse button. 
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4. If you want to alter the relationship between the dark and light pixels 
in your selection, click and drag the Contrast slider. 


The default position is at the center. You can drag left down to -100 units 
to reduce the contrast in the selection, or you can drag right up to 100 
units to increase the contrast in the selection. If the Preview check box 
is selected, as it is by default, you can see the change to your selection 
when you release the mouse button. 


5. Click OK. 
All colors on a computer monitor are formed from the combination of the 


three color channels, red, green, and blue. You can change the curves for 
the individual color channels or for the combination of all channels. You can 
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Figure 4-13: 
The default 
setting in 
the Curves 
dialog box is 
a diagonal 
line. 


make curve adjustments for bitmaps only, not shapes. If you want to adjust 

the color of a vector shape using curve values, convert it to a bitmap first 

(select the object and choose Flatten Selection from the Options menu in the 

Layers panel). To change the curve of the RGB channels, follow these steps: 
1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 


2. Choose Filters®Adjust ColorCurves. 


A dialog box with a grid appears, as you can see in Figure 4-13. The 
grid’s horizontal axis shows the original brightness of the pixels in your 
selection. The grid’s vertical axis shows the new brightness of the pixels. 


3. Choose a channel from the Channel drop-down list. 


Your choices are RGB (all channels), Red, Green, or Blue. 



































4. Click anywhere along the line in the grid and drag to adjust the curve. 


When you click the line, Fireworks generates a handle automatically. The 
end points always remain where they start, but you can add handles any- 
where else on the line and drag them to new points. You can delete han- 
dles by dragging them up out of the dialog box. You can type a numerical 
value into the Input and Output text fields instead of dragging the line, if 
you prefer. 


If the Preview check box is selected, as it is by default, you can see the 
changes when you release the mouse button after dragging a handle. 


Clicking the Auto button restores the line to its original setting. 
5. Click OK. 
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Follow these steps to change the hue, saturation, and/or lightness of a 
graphic or selection: 


1. 


Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image objects, 
see Book III, Chapter 3. 


. Choose Filters>Adjust Color™Hue/Saturation. 


A dialog box with separate sliders for Hue, Saturation, and Lightness 
pops up. 


. If you want to change the basic color of your selection, click and drag 


the Hue slider. 


The default position is at the center. You can drag left down to -180 
degrees, or you can drag right up to 180 degrees. (You can think of the 
slider as a flattened circle, like a map of the Earth is a flattened globe.) 
If the Preview check box is selected, as it is by default, you can see the 
change to your selection when you release the mouse button. 


If you want to alter the intensity of the colors in your selection, click 
and drag the Saturation slider. 


The default position is at the center. You can drag left down to —100 units 
to reduce the color saturation in the selection, or you can drag right up 
to 100 units to increase the color saturation in the selection. If the Preview 
check box is selected, as it is by default, you can see the change to your 
selection when you release the mouse button. 


. If you want to alter the luminosity of the colors in your selection, click 


and drag the Lightness slider. 


The default position is at the center. You can drag left down to —100 units 
to reduce the lightness of the selection, or you can drag right up to 100 
units to increase the lightness of the selection. A setting of -100 gives 
you black, and a setting of 100 gives you white. If the Preview check box 
is selected, as it is by default, you can see the change to your selection 
when you release the mouse button. 


6. Click OK. 


If you want to change the hue and/or saturation of black or white pixels, 
select the Colorize check box and then make your adjustments. 


To invert the colors of a graphic or any selection, follow these steps: 


1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 
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Figure 4-14: 


The Levels 
dialog box 
includes a 
histogram. 


2. Choose Filters®Adjust Color™Invert, or use the key command 


Ctrl+Alt+Shift+I. 


The colors of your selection are inverted, as in a photographic negative. 


The Levels command lets you make color corrections to an image or selec- 
tion by altering the balance of highlights, midtones, and shadows. You call 
the graphical representation of the distribution of shades a histogram. 
To adjust the levels of an image or image selection, follow these steps: 


1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 


2. Choose Filters>Adjust Color™Levels. 


The Levels dialog box appears, as Figure 4-14 shows you. 





‘Levels 


Channel: RGB x —— | 
(iana 


Input levels; 0 1 255 























Output levels: 0 








3. Choose a channel from the Channel drop-down list. 


Your choices are RGB (all channels), Red, Green, or Blue. 


. Click and drag the Input shadows slider (the black triangle at the left 
under the histogram) to adjust the blacks in the selected image. 


You can’t drag the shadows slider farther right than the midtones slider 
because shadows must always be darker than midtones. The slider scale 
goes from 0 (no brightness, which is black) to 255 (full brightness, which 
is white). The midtones slider moves automatically when you move the 
shadows slider. 


. Click and drag the Input midtones slider (the gray triangle in the 
middle under the histogram) to adjust the midtones (grays). 


You can’t drag the midtones slider farther left than the shadows slider 
or farther right than the highlights slider. The midtones slider’s scale 
goes from 0 to 10. 


N 
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Dragging the midtones slider to the right generally darkens the selec- 
tion, and dragging it to the far left can create something resembling a 
posterization effect, in which transitions between colors happen abruptly 
rather than smoothly. 


. Click and drag the Input highlights slider (the white triangle at the 


right under the histogram) to adjust the whites in your image. 


You can’t drag the highlights slider farther left than the midtone slider 
because highlights must be lighter than midtones. 


Click and drag the Output shadows and highlights sliders as needed. 


You can move these sliders past each other. Moving the darkness slider 
all the way to the right and the lightness slider all the way to the left 
inverts the colors in the selection. 


Click OK. 


If you click Cancel, your adjustments aren’t implemented. If you click the 
Auto button, Fireworks sets the optimal color balance automatically. 


To let Fireworks set the optimal levels automatically, you can click the Auto 
button in the Curves and Levels dialog boxes, or you can select a graphic or 


part of a graphic and then choose FiltersAdjust Color™Auto Levels. 


Blurring and sharpening 


Blurring a graphic or selection can add a sense of softness to an image; sharp- 


ening, on the other hand, can add a sense of solidity or hyper-reality to an 


image. Note: The Sharpen command can’t correct a blatantly out-of-focus 


photo; nothing can. 


To blur an image or part of an image using Fireworks presets, simply follow 
these steps: 


1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 


2. Choose Filters Blur=Blur. 


For a more pronounced effect, choose Filters®Blur~Blur More. You can 
also click Filters on the Image Editing panel and choose Blur or Blur 
More from the list that appears. 


3. Click OK. 


You can also use the Blur tool from the Bitmap section of the Tools panel to 
“paint” a blur across your image. If you want to blur multiple small parts of 
an image, you may find the Blur tool more effective. 
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If you want more control over the amount of blur in your image, you can 
employ the Gaussian Blur filter by following these steps: 
1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 


2. Choose Filters >Blur™Gaussian Blur. 
The Gaussian Blur dialog box appears. 
3. Click and drag the slider to set the radius of the blur. 


The radius can be set from 0.1 (hardly noticeable blur) to 250.0 (nearly 
total blur). 


4. Click OK. 
You can get other blur filters, as well, including Motion, Radial, and Zoom, 


each with its own properties and settings. Experiment to find the filter that 
gives you the effect you’re looking for. 


To sharpen an image or selection by using Fireworks presets, just follow 
these steps: 


1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 


2. Choose Filters>Sharpen™Sharpen. 
For a more pronounced effect, choose Filters®Sharpen™Sharpen More. 
3. Click OK. 


If you want more control over the amount and manner of the sharpening, 
you can use the Unsharp Mask filter. This filter works by strengthening the 
contrast between adjacent pixels, which makes edges between areas of color 
more sharply defined. Actually, all the Sharpen filters work this way, but with 
Unsharp Mask, you can create your own settings for three aspects of the 
sharpening process: 


+ Sharpen Amount: The amount of contrast introduced between adjacent 
pixels 
+ Pixel Radius: The size of the area around each pixel that gets sharpened 


+ Threshold: Determines which pixels get sharpened, based on the exist- 
ing contrast levels in the selection or image 
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Follow these steps to sharpen an image or selection, using the Unsharp Mask 
filter: 
1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 


2. Choose Filters®Sharpen™Unsharp Mask. 
The Unsharp Mask dialog box pops up. 
3. Click and drag the Sharpen Amount slider. 


The slider goes from 1 percent (not very much) to 500 percent (very 
strong contrast). 


A 


. Click and drag the Pixel Radius slider. 

The slider goes from 0.1 (hardly noticeable) to 250.0 (very strong effect). 
5. Click and drag the Threshold slider. 

The slider goes from 0 (change all pixels) to 255 (change no pixels). 
. Click OK. 


a 


Using the other filters: Convert 
to Alpha and Find Edges 


The Convert to Alpha filter makes your selection transparent. The lighter the 
pixel, the more transparent it becomes. White pixels, for example, seem to 
disappear, allowing the background to show through fully. Black pixels, on 
the other hand, remain black and completely opaque. 


To convert a selection to Alpha, follow these simple steps: 


1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 


2. Choose Filters®Other™Convert to Alpha. 
The selection is converted. 

3. Click anywhere on the canvas or use the key command Ctrl+D to dese- 
lect your selection. 


The Find Edges filter makes a photograph look like a line drawing by greatly 
simplifying the color information in the image. 
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To use the Find Edges filter, just follow these steps: 


1. Select a graphic or part of a graphic. 


For more information on selecting image objects or parts of image 
objects, see Book III, Chapter 3. 


2. Choose Filters>Other™Find Edges. 
The selection takes on the appearance of a line drawing. 


3. Click anywhere on the canvas or use the key command Ctrl+D to dese- 
lect your selection. 


Adding shadows to objects 


You can add several kinds of shadows to objects in Fireworks 8. Two of the 
most useful shadows are 


+ Drop-shadows: Create the illusion that text or objects are floating above 
the surface of the canvas. 


+ Shadow auto shapes: New to Fireworks 8, you can adjust shadow auto 
shapes as if changing the position of the light source that’s making the 
text or object cast a shadow. 


To add a drop-shadow to an object, simply select the object and click the 

+ button next to Filters in the Properties panel. Then choose Shadow and 
Glow®Drop Shadow. You can edit various properties of the drop-shadow by 
clicking the Information button (the white, italic į in a blue circle in the 
Filters section of the Properties panel). 


To add a shadow auto shape to an object, select the object and choose 
Commands™Creative™Add Shadow. You can edit the offsets and width of the 
auto shape using the new Auto Shape Properties panel. 
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Fireworks lets you use third-party filters as plug-ins, as the included “lite” ver- 
sions of Alien Skin’s Eye Candy 4000 (Bevel Boss, Marble, and Motion Trail) 
and Splat (Edges) demonstrate. These versions of the third-party software 
don’t have all the features of the full version (hence the “lite” in the names), 
though grayed-out menu options give you a sense of what the full-featured 
version of the software can do (and the Buy Now button in the filter window 
makes getting the full-featured version pretty easy!). 


Because these lite versions aren’t officially part of Fireworks, we don’t cover 
them in this book. You can find information about the fully-functioning ver- 
sions of these filters at www. alienskin.com. 


Chapter 5: The Power 
of Layers and Frames 


In This Chapter 


Managing layers 

Using layers to mask images 
Using the Web layer 
Working with objects 
Managing frames 


1#” Using frames to create rollovers and animated GIFs 


Freerssing that you put on your canvas in Fireworks 8 — everything that 
you draw, type, paste, or import — exists in a layer. And every layer 
exists in a frame. Initially, you may think this concept seems simple enough, 
but it’s more involved than it first appears. Frames can share layers, and a 
single layer can contain a single object (a bitmap, shape, or text) or multiple 
objects. A large file can actually get pretty complex, where you can have 
dozens of bitmaps, shapes, and text blocks. 


Layers give you a way to organize your Fireworks PNG image so that you can 
easily turn groups of objects on or off (make the groups of objects visible or 
hide them), put objects on top of or beneath other objects, lock groups of 
objects so you can’t modify them, and find objects easily. 


Frames, on the other hand, offer a way to organize layers so you can export 
multiple states of buttons (different versions of the button, such as those 
versions that appear when the user rolls over or clicks the button) and ani- 
mated GIFs quickly and easily. 


The canvas is at the bottom of the stack of layers. It’s not really a layer 
itself — you can’t expand or collapse it, make it visible or invisible, locked 
or unlocked, or delete it. 


The Web Layer, the repository for slices and hotspots, is always the top layer, 
as you can see in Figure 5-1. You create slices in the Web Layer in order to cut 
your page design into individual images. After you slice images, you can opti- 
mize, export, and place them in HTML pages, where you can hyperlink them. 

You create hotspots in the Web Layer to make images that you can export for 
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Figure 5-1: 
The Layers 
panel 
displays 

a stack 

of layers 

in their 
collapsed 
state. 


your Web page along with some HTML code that specifies areas in the image 
that you want hyperlinked. You can make the Web Layer visible or invisible, 
and you can lock and unlock it, but you can’t delete it. 
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Managing Layers 


Fireworks uses the concept of folders to describe how a layer functions. 
(Check out the little folder icons next to the layer names in Figure 5-1.) You 
can think of a layer as a receptacle for “files” (image objects and text objects). 
You can copy or move the individual “files” to other layers, delete them, 
name them, rename them, and so on. 


Take a closer look at the Layers panel. Looking left to right at an unexpanded 
layer, you can see the following across four columns: 


+ The Expand/Collapse button: A plus sign (+) in the box indicates that 
you can expand the layer. A minus sign (-) in the box indicates that you 
can collapse the layer. Click the control to toggle between expanded and 
collapsed views of the layer. 


+ The Show/Hide layer button: An eye appears in this column when the 
layer is visible on the canvas. When the layer is invisible on the canvas, 
the column is empty. Click in the column to toggle the layer’s visibility 
on the canvas off and on. When you export images from your PNG, only 
visible objects are exported. 


+ The Lock/Unlock button: If you click this column of a collapsed layer, 
a lock appears, indicating that you can’t edit any of the objects on that 
layer. If you click the layer name (in the fourth column) or turn on the 
Show/Hide layers button (in the second column), a pencil appears in the 
third column, indicating that the layer is unlocked and active. If the layer 
is unlocked and active, you can edit the objects in the layer. You can have 
only one layer active at a time, though you can unlock or lock any number 
of layers at once. You can, of course, make individual objects visible or 
invisible, and locked or unlocked. 
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+ The layer name: By default, Fireworks names each layer for the order in 
which you created it. The first layer is called Layer 1, the second layer 
is called Layer 2, and so on. (To find out how to give the layer a more 
meaningful name, check out the “Renaming a layer” section, later in this 
chapter.) When the layer is active, the layer name is highlighted in the 
Layers panel. 


Adding and deleting layers 
When you add a new layer to your PNG, the new layer always gets added 
above the currently selected layer. You can add a layer in three easy ways: 


+ Click the Add/Duplicate Layer button (the folder with the plus sign on it) 
at the bottom middle of the Layers panel. 


+ Choose Edit™Insert™Layer. 


+ Choose New Layer from the Layer panel’s Options menu (the bulleted 
list icon at the right of the panel’s title bar). 


In either case, the New Layer dialog box appears, with the layer’s default 
name highlighted. You need to type a new name for the layer and select the 
Share Across Frames option if you’re making a multiple-frame document and 
you want the objects on the new layer you created to be visible on the other 
frames of your document. The newly created layer is active until you click 
another layer. 


To delete a layer, click it in the Layers panel and drag it to the Delete button 
(the garbage can icon) at the bottom right of the Layers panel. You can also 
click the layer, and then click the Delete button in the Layers panel. 


Making a layer active 

You can have only one layer active at a time. However, you can have many 
objects on a layer ready to edit at the same time, which can come in handy 
when you want to move several objects the same amount and in the same 
direction. In order to change any object in a layer, you need to make the 
layer active: 


+ Make a layer active: Click an object on the canvas that’s in that layer or 
click the name of that layer in the Layers panel. 


+ Make a layer inactive, but not locked: Click an object on the canvas 
that’s not in that layer, or click the name of another layer in the Layers 
panel. 


Sometimes when you have an object from one layer selected and you click 
an object on another layer to make it active, the item that you’re trying to 
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Figure 5-2: 
Selecting 
an object on 
the canvas 
also selects 
it in the 
Layers 
panel. 


select doesn’t highlight. Why not? Look closely: You have selected a new 
layer, just not the one that you want. Often you find yourself in this position 
if you have a very large object on the bottom layer of your file — when you 
try to click something in front of it, Fireworks thinks you’re trying to click 
the large object on the bottom layer and highlights it rather than the smaller 
object (the one that you’re trying to select) in front of it. Luckily, you can 
just click the object that you want to select in the Layers panel to make it 
active. 


You can now select multiple neighboring objects or layers in the layers panel. 
Simply click the first object or layer that you want to select and then Shift+ 
click the last one. All the objects and layers in between are also selected. 


Expanding and collapsing layers 

Because files can contain many layers, and layers can contain many objects, 
and you have only so much room for the Layers panel, Fireworks lets you 
expand and collapse a layer as you need: 


+ Expand a layer: Click the plus (+) button in the first column of that layer. 
Each object in that layer appears on its own line below the layer name. 
Each object has its own Show/Hide button, as well as a thumbnail of the 
object and a name. 


+ Collapse a layer: Click the minus (>) button. If the layer is active, it 
remains so until you click another layer or an object on the canvas that 
resides on another layer. 


Figure 5-2 shows the Layers panel with some layers collapsed and one layer 
expanded to show the objects that it contains. 
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Making a layer visible or invisible on the canvas 


The more complicated your designs get, the more you show and hide layers, 
making them visible or invisible. Luckily, you can show and hide layers simply: 


+ Make a layer visible (show a layer): Click in the second column or the 
name column of the Layers panel. 


+ Make a layer invisible (hide a layer): Click the Hide Layer button (the 
eye icon) in the second column. 


If you export your design as images (so you can use the images in a Web 
page), objects on hidden/invisible layers don’t export. In other words, what 
you see on the canvas when you export is what you get in your exported 
images folder. 


Locking and unlocking a layer 

Sometimes when you have a lot of overlapping objects, selecting some objects 
without selecting others can get difficult. To prevent accidentally moving or 
deleting objects, you can lock the layer that they’re on. You can’t lock indi- 
vidual objects, but you can move objects from one layer to another (say, 
from an unlocked layer to a layer that you can then lock). 


+ Lock a layer: Click in the third column. If the column is blank when you 
click in it, the lock appears. If the column has a pencil in it, the pencil 
changes to a lock, and the pencil appears in an adjacent layer, if you 
have one. 


+ Unlock a layer: Click the lock in the third column of that layer. You don’t 
automatically make a layer active by unlocking it. 


Renaming a layer 

By default, each non-text layer is named for the order in which you created 
it. The first layer is called Layer 1, the second is called Layer 2, and so on. If 
you have only a couple of layers in your document, that naming scheme may 
work just fine. If you have dozens of layers, on the other hand, you probably 
want to place similar objects together on layers and then name the layers so 
you can tell with a quick glance at the Layers panel where the objects are. 


When you add text to a layer, Fireworks now automatically names the layer 
based on the text that you enter. If you enter a paragraph of text, you don’t 
have to remember the whole thing — Fireworks uses only the first 20 charac- 
ters of text for the layer name. 


To rename a layer from its default name, just follow these simple steps: 
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1. Double-click the layer name. 


A simple dialog box appears. The current name is highlighted in the text 
field. 


2. Type a new name. 


You don’t need to click in the text field because the current layer name 
is already highlighted. If you want to keep part of the current name, use 
your mouse to select the part of the name that you want to replace or 
remove and type over or delete it. 


3. If you have multiple frames in your document and you want this layer 
to be visible in the other frames, select the Share Across Frames 
check box. 


Otherwise, move on to Step 4. 
4. Press the Enter key. 


The dialog box closes, and your layer has a new name. 


Moving a layer in front of or behind other layers 


As you add layers to your PNG file, they stack up. The higher a layer appears 
in the Layers panel, the closer the objects in that layer are to the front of the 
canvas. Likewise, within a layer, the higher an object appears, the closer it is 
to the front of the canvas. 


Figure 5-3 illustrates the relationship between objects, their position on the 
canvas, and their position in the Layers panel. The before part (on the top) 
of Figure 5-3 shows the bowling ball in front of both pins, and in the Layers 
panel, the object named “bowling ball” is above the “pin” objects. The after 
part (on the bottom) of Figure 5-3 shows the large pin in front of the bowling 
ball. The ball, in turn, is in front of a smaller bowling pin. In the Layers panel, 
the ball object is between the pin objects. 


You can change the order of a layer or object in one of two ways: 


+ Move a layer or object in front of another: Click the name column of 
the layer or object and drag it up. A black horizontal line appears when 
you roll over a spot where you can place the layer or object. Release the 
mouse button to drop the layer or object in its new location. 


+ Move a layer or object behind another: Click the name column of the 
layer or object and drag it down. A black horizontal line appears when 
you roll over a spot where you can place the layer or object. Release the 
mouse button to drop the layer or object in its new location. 
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Merging layers 

Sometimes in the process of creating a PNG document, you find that you 
need all the objects you’ve made, but you don’t need them to be on so many 
layers. If you want to move one or two objects from one layer to another, you 
can do so using the method described in the preceding section, “Moving a 
layer in front of or behind other layers.” If, on the other hand, you want to 
move all the objects in one layer to another, and you have quite a few 
objects in each layer, you probably want to merge the layers. 


To merge all the objects on one layer into a single bitmap object in the layer 
immediately underneath, follow these steps: 


1. Click in the name column of the layer in the Layers panel. 


Make sure all the objects in the layer are highlighted. (If they’re not, you 
may have clicked an object in the layer rather than the layer itself.) 


2. If necessary, drag the layer so it’s on top of the layer that you want to 
merge into. 


You use the Merge Down command in Step 3, so you need to make sure 
the two layers are one on top of the other. 


3. Click the Options menu icon (it looks like a bulleted list) at the top 
right of the Layers panel and select Merge Down. 


The selected layer merges into the one below it. The objects in the 
upper layer are combined into a single bitmap object in the new layer. 
You can’t edit text in the new object, and vector shapes in the new 
object are now bitmaps. 
<e 
You can also use the key command Ctrl+E to merge a layer into the one 
below it, or choose Modify*Merge Down. 


To merge all the layers together into one, do the following: 


1. Click in the name column of any layer in the Layers panel. 
2. Choose Modify™Flatten Layers. 


Your document now has a single layer. Each object remains separate 
from the others. 


Using Layers for Masking 


A mask is a layer that you create specifically to let some areas of an image 
show while you keep other areas hidden. Fireworks uses two kinds of 
masks — bitmap masks and vector masks (you can use text as a vector 
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mask). Both kinds of masks have one thing in common — what they do: 
When you lay a mask over an image, the mask blocks out parts of the image 
and lets other parts show through. The shape of the mask determines which 
parts show through and which are blocked out, as Figure 5-4 shows you. 
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A vector mask, on the other hand, uses the shape outline of the vector object 
like a cookie cutter. However, Fireworks gives you a lot more flexibility than 
you have with a real cookie cutter! For example, you can anti-alias (smooth 
out jagged edges) and even feather (blur) the edges of your mask, or you can 
change the size of your mask at any time after you’ve created it. 


Fireworks offers many ways to create masks. We cover the basics here, but 
you can always refer to the Fireworks Help files if you want to explore masks 
more in-depth. 


Creating a bitmap mask 


To make a bitmap mask using an existing bitmap, follow these steps: 
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1. If you want to mask multiple objects, group them by selecting them 
and using the key command Ctrl+G. 


2. Select the object you want to use to make the mask. 


You can select multiple objects to make a mask by Shift+clicking them, 
but if you do, Fireworks automatically makes a vector mask, not a 
bitmap mask. See the section “Creating a vector mask,” later in this 
chapter, if you want to make a vector mask that uses multiple bitmap 
objects. 


3. Choose Edit™Cut, or use the key command Ctr1+X. 
Cut? That’s right. You paste the shape in a couple of steps. 


4. Select the layer, object, or group you want to be visible through the 
mask by selecting it in the Layers panel or on the canvas. 


The layer, object, or group is highlighted. 
5. Choose Edit™Paste as Mask. 


All the parts of the masked image that fall outside the masking object 
disappear. In the Layers panel, the mask icon shows up in the third 
column, and a link icon and thumbnail of the mask shape show up next 
to the thumbnail of the masked image. 


6. If it’s not already selected, select Alpha channel in the Property 
inspector. 


When the mask is selected in the Layers panel, the Property inspector 
offers two options for a bitmap mask: Mask to Alpha Channel and Mask 
to Grayscale (the default), as Figure 5-5 shows you. Mask to Alpha 
Channel uses the transparency of the mask bitmap, and Mask to 
Grayscale uses the brightness of the pixels in the mask bitmap. 


You can think of bitmaps as having four channels: Red, Green, Blue, and 
Alpha. The Red, Green, and Blue channels describe the amount of each of 
those colors in every pixel in the bitmap. The Alpha channel contains infor- 
mation about the level of transparency of each pixel in the bitmap. 








Figure 5-5: 
You can 

h w Properties: 5 
ç ange Ea Bkmep Mask Mesk: © Alpha channel S) 
the Mask Sanat 
setting in ‘Se 





the Property 
inspector. 


«e 


Using Layers for Masking 273 


You can hide a mask temporarily by clicking it in the Layers panel and then 
choosing Disable Mask from the Layers panel’s Options menu (the bulleted 
list icon at the top right of the panel). The mask icon disappears from the 
Show/Hide object column and a red X appears over the mask, indicating that 
the mask is disabled. To re-enable the mask, simply click it. 


To make a bitmap mask by creating an empty mask and modifying it, follow 
these steps: 


1. Select the object you want to mask by clicking it on the canvas or in 
the Layers panel. 


2. Click the Mask button at the bottom of the Layers panel or choose 
Modify™Mask™Reveal All. 


The Mask icon is the rectangle with a dotted circle inside. Reveal All 
means the mask you made is completely transparent until you modify it. 


3. Select a paintbrush or other drawing tool and draw on top of the 
bitmap. 


Wherever you draw, the mask blocks the image behind. 


What if you want to do the opposite, reveal what’s underneath only where 
you draw? Easy! Just follow these steps: 


1. Select the object you want to mask by clicking it on the canvas or in 
the Layers panel. 


2. Choose Modify®Mask™Hide All. 


Hide All means the mask you made is completely opaque until you 
modify it, so when you first apply the mask, it looks like your masked 
object has disappeared. 


3. Select any color other than black. 


Because the opaque areas of the mask appear black, you have to draw 
the areas that you want to show through by using any other color. 


4. Select a paintbrush or other drawing tool and draw on top of the 
bitmap. 


Wherever you draw, the mask reveals the image behind. 


You can delete a mask by clicking it in the Layers panel and then choosing 
Delete Mask from the Layers panel’s Options menu (the bulleted list icon at 
the top right of the panel). When you delete a mask, a dialog box appears to 
give you the option to apply the mask before deleting it, which changes the 
masked image. 
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Figure 5-6: 


A vector 
star-shaped 
mask with 
bevels and 
drop- 
shadows 
added to 
make the 
image 
“pop.” 


Creating a vector mask 


To make a vector mask, such as the one shown in Figure 5-6, follow these 
steps: 

















— 


. Select a text block or vector shape by clicking the shape on the canvas 


or in the Layers panel. 


The object is highlighted on the canvas and in the Layers panel. 


. Drag the shape or text over the object or objects you want to mask. 


The layer with the shape doesn’t have to be on top of the layers with the 
objects you want to mask, but you can position the shape more easily if 
you can see it! 


. Choose Edit™Cut or use the key command Ctrl+X. 


You paste the shape in Step 5, so you need to cut it here. 


. Select the layer or object you want to be visible through the mask by 


clicking it in the Layers panel or on the canvas. 


The layer or object is highlighted. 


. Choose Edit™Paste as Mask. 


All the parts of the masked image that fall outside the mask shape or 
text disappear. In the Layers panel, the mask icon shows up in the third 
column, and a link icon and thumbnail of the mask shape appear next to 
the thumbnail of the masked image, as shown in Figure 5-7. 


Figure 5-7: 
An active 
mask in the 
Layers 
panel. 
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Using the Web Layer 


The Web Layer was the greatest innovation of the original version of 
Fireworks, and even if it no longer seems revolutionary, it’s still as handy a 
feature as you come across in making Web pages. The Web Layer lets you 
cut your page layout into slices, which are pieces of your layout, held in 
place by HTML, that end up as individual images on your Web page. The 
Web Layer also lets you name and optimize each slice individually, which 
means that you can find the best balance of file size and image quality for 
each piece of your layout. Just as importantly, because it’s a repository for 
slice information, the Web Layer lets you save slice coordinates, dimensions, 
and optimization settings along with everything else in your PNG file. 


You never have to leave the Fireworks application to ready your images for 
the Web, and you don’t have to write down or remember your image size, 
placement, and optimization settings if you ever need to remake an image. 
The Web Layer also lets you see at a glance where your slices are, which 
helps you re-create your page design in HTML. For details about slices and 
image optimization (including when to use GIFs and when to use JPEGs), see 
Book III, Chapter 6. 


Standard HTML pages are built on a grid system of cells organized into rows 
and columns. The rows and columns make up a fable. You can have multiple 
tables on a Web page, and you can even have tables within tables within 
tables. You can set the height of each row and the width of each column 
individually, but you can’t make a round cell or a triangular table. 


If you use Fireworks to make your HTML, each slice that you make in your 
PNG ends up as an image that fills a table cell in your Web page. Using 
Dreamweaver, you can combine multiple images in a single cell in your 
HTML code, but Fireworks isn’t made to work that way. 


Think of your Web page design as a rectangular sheet cake. You can make 
the decorations on top of the cake all kinds of shapes, but when you cut 
the cake, you probably make rectangular slices, cutting right through text, 
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Figure 5-8: 


A bowling 
ball divided 
into multiple 
slices so 

it can be 
recon- 
structed on 


a Web page. 


slicing a single icing rose into four pieces, and so on. You ignore the design 
on the surface of the cake because you’re more interested in slicing the cake 
quickly and controlling the size of each piece. But you may make a few spe- 
cially-cut pieces if somebody really wants the blue rose near the top or the 
exclamation points from the text that says, “Happy Birthday!!!” 


When you’re cutting up a Web page, you want certain pieces to remain intact 
(a corporate logo or a navigation button, for example), but other objects fit 
the HTML grid structure better if you slice them into pieces or include them 
with other objects on a single piece. If you have an object with round edges, 
you need to slice it into rectangles so you can reconstruct it on a Web page, 
like the bowling ball shown in Figure 5-8. You recreate the bowling ball in 
HTML as three stacked rectangles. The middle slice in Figure 5-8 is selected, 
so its name and image compression type appear at the top left of the slice. 
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Cutting your objects with the Slice tool 


The Slice tool, which you can find in the Web section of the Tools panel, 
looks like a utility knife on a green square with red lines on each side. When 
you employ the Slice tool, the slices you create are added automatically to 
the Web Layer. 
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To make a slice in your PNG file, follow these steps: 


1. Select the Slice tool from the Web section of the Tools panel. 
2. Click and drag diagonally on the canvas to make a rectangle. 


The slice shows up as a green overlay on the canvas. 


Slicing your canvas more exactly 
with the Polygon Slice tool 


The Slice tool has a partner “hidden” behind it in the toolbar: the Polygon 
Slice tool, which you can get to by clicking and holding the Slice tool until 
the pop-up menu containing the Polygon Slice tool appears, or by clicking 
the Slice tool and pressing K on your keyboard. 


You can probably guess that the Polygon Slice tool lets you make nonrectan- 
gular slices. But wait! Didn’t we say that slices and images have to be rec- 
tangular? The short answer is that the Polygon Slice tool doesn’t create a 
nonrectangular slice — it creates a rectangular slice with a polygonal hotspot 
(a polygonal area that you can hyperlink in combination with some HTML 
code) inside. 


So what’s the difference between a polygonal hotspot made by the Polygon 
Slice tool and one made by the Polygon Hotspot tool? The Polygon Hotspot 
tool doesn’t make a slice, it just makes an irregularly-shaped linkable area in 
a slice. (A slice may contain many hotspots, each linked to a different page.) 
The Polygon Slice tool, on the other hand, makes both hotspots and slices. If 
you have a map of the United States, and you want each state to link to its 
own HTML page, use the Polygon Hotspot tool to make linked areas in the 
shape of each state. (For more information on the Polygon Hotspot tool, see 
Book III, Chapter 6.) If you just have a few irregularly shaped buttons, you 
can use the Polygon Slice tool to make a linkable image. 


To make a polygonal slice, follow these steps: 
1. Select the Polygon Slice tool from the Slice tool menu in the Web area 
of the Tools panel. 


If the regular Slice tool is showing, click and hold the Slice tool button to 
reveal the pop-up menu so you can select the Polygon Slice tool. 


2. Click a series of points to make a polygonal shape. 


Fireworks automatically draws straight lines to connect each point to 
the last. You don’t need to click the first spot to close the shape. 
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sy TO 
NY P You can make a polygon slice to match any vector shape by using the new 
guno Insert Polygon Slice command. Simply select the shape and choose 
Edit™Insert™Polygon Slice, or use the key command Alt+Shift+P. 


Working with Objects 


In the world of Fireworks, an object is any self-contained bitmap, vector 
shape, or text block that can appear on the canvas. The object may include 
blank space, and you can make a single object out of many objects (as you 
do when you merge layers, which you can read about in the section “Merging 
layers,” earlier in this chapter). In general, you want to leave anything in 
your design that you may want to edit individually as a single object. 


Renaming an object in the Layers panel 


By default, each object is named for its type (path, bitmap, and so on), but 
you can individually rename them. As with layers, being able to name objects 
in the Layers panel becomes crucial as you add more elements to your 
design. The Layers panel does contain thumbnails of each object, but if you 
have multiple similar objects in several places on the canvas, you may want 
a way to tell the objects apart in the Layers panel. 


To rename an object, double-click the current name of the object in the 
Layers panel and type a new name in the text field that appears. Press Enter 
or click outside the text field to save the new name. Renaming an object 
makes it active. When the object is active, the line around the icon is high- 
lighted and the column reverses to a black background with white text. 


Moving an object between layers 


You may want to move an object from the layer it was originally created on 
to a different layer. For example, you may want an object to be stacked on 
top of or under other items on the canvas and have other objects in the 
layer remain exactly where they are. Luckily, you can move an object from 
one layer to another in a snap. 


To move an object from one layer to another, click the name column of the 
object in the Layers panel and drag it to a new location. A black horizontal 
line appears when you roll over a spot where you can place the object. 
Release the mouse button to drop the object in its new location. 


Setting an object’s opacity/transparency 

You can set each object’s transparency independently by using the slider 
near the top left of the Layers panel. By default, objects are completely 
opaque, and the opaque object completely blocks out whatever objects 
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are underneath it, as in Figure 5-3. You can make the objects on a layer semi- 
transparent, which allows the objects underneath to show through by an 
adjustable amount. 


The extreme ends of the Opacity/Transparency scale are 100 percent opaque 
(which can also be thought of as 0 percent transparent) and 0 percent opaque 
(100 percent transparent). When you add an object to the canvas, its default 
opacity of 100 shows up at the top left of the Layers panel and in the object’s 
Property inspector. 


To adjust the transparency of a layer, follow these simple steps: 


1. Click the name column of the object that you want to adjust or click 
the object on the canvas to select the object. 


The object is highlighted on both the canvas and in the Layers panel. 


2. Click and drag the Opacity/Transparency slider to adjust how opaque 
you want the object to be. 


The Opacity/Transparency slider is the button with the downward- 
pointing arrow located near the top left of the Layers panel, next to the 
Opacity text field. (You can find an identical slider in the Property 
inspector.) 


3. Release the mouse button when you get to the setting you want. 


You can also type a number from 0 to 100 into the text field next to the slider 
to set the object’s transparency. Remember to press the Enter key to apply 
the new setting. 


Fireworks can do a few fancier tricks with opacity. For example, you can set 
an opacity gradient, so some parts of your object are more transparent than 
others. See the following section for more information on this topic. 


Blending 

Blending one object with another involves varying the transparency of the 
top object so some of the bottom object shows through. But blending in 
Fireworks involves more than just adjusting opacity. With Fireworks 8, you 
can choose from a whopping 39 blending modes, in conjunction with the 
Opacity control and the colors of your objects, to produce different blending 
effects. Here are some of the most common blending modes: 


+ Normal: The default blending mode, normal, actually means no blending 
goes on at all. 


+ Darken: This mode replaces pixels of the top object that are lighter than 
the pixels in the object underneath with the darker pixels from below. 
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+ Multiply: This mode multiplies the value of each pixel of the top object 
with each pixel of the objects underneath, which generally results in a 
darker color. 


+ Lighten: This mode replaces pixels of the top object that are darker than 
the object underneath with the lighter pixels from the object below. 


+ Screen: This mode divides the value of each pixel of the bottom object 
by each pixel of the object on top and produces a lighter color. 


+ Difference: This mode subtracts the darker color from the color with 
more brightness, regardless of which is on top. 


+ Hue: This mode replaces the luminance and saturation of a pixel on top 
with those values of the pixel underneath. 


+ Saturation: This mode replaces the hue and luminance of a pixel on top 
with those values of the pixel underneath. 


+ Color: This mode replaces the luminance of a pixel on top with that of 
the pixel underneath but keeps the hue and saturation of the top pixel 
the same. 


+ Luminosity: This mode replaces the hue and saturation of the pixel on 
top with those values of the pixel underneath, leaving the luminance of 
the pixel on top. 


+ Invert: This mode changes the colors of the pixels in the object under- 
neath to their opposites, regardless of the colors of the object on top. 


+ Tint: This mode adds gray to the areas of overlap. 


+ Erase: This mode removes all pixels in the overlapping areas, leaving a 
hole in the canvas. Any objects underneath the object with a blend 
mode of erase become invisible where the objects overlap. 


Layers can have blending modes, but the blending mode settings of individ- 
ual objects on the layer override the settings of the layer that they’re on. So 
different objects on the same layer can have individualized blend settings. 
The blending mode of a group of objects, however, overrides the blending 
modes of individual objects within the group. Removing the blending mode 
of the group restores the blending modes of the individual objects. 


To blend an existing object with whatever is under it, just follow these steps: 
1. Select the object you want to blend by clicking it on the canvas or in 


the Layers panel. 


2. Select a blending mode from the drop-down list at the top-right of the 
Layers panel. 


When you release the mouse button, the blend mode takes effect. 


3. 
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If you want, adjust the transparency of the object by typing a value 
between 1 and 100 in the Opacity text field next to the blending mode 
list or by using the Opacity/Transparency slider between the Opacity 
text field and the blending mode list. 


The blended object affects (or is affected by) any objects that you put under 
the blended object where both objects overlap. 


You can also establish a blend’s opacity and mode before you create an 
object by setting the properties of a drawing tool in the Property inspector, 
as you can see in Figure 5-9. (Note: Not all tools permit you to set the object 
properties before you create the object.) Your settings apply every time that 
you use that tool. Remember, blend settings of individual objects override 
the blend settings of the layer the objects are on. 


To set the blend before you draw, follow these steps: 


1. 


a 


Use the key command Ctrl+D or choose Edit™Deselect to make sure 
you don’t have any objects selected. 


If you have an object selected, you may accidentally change its blend 
mode when you're trying to set a blend mode for the object you’re about 
to create. 


. Select a drawing tool, such as the Brush tool. 


You can’t change some tools’ blends from the default, Normal. 


. Select a color for the tool. 


See the section on adding color in Book III, Chapter 2 if you don’t know 
how to select a color for the tool. You can always change the color of the 
object later, but that can get complicated, especially if you have a spe- 
cial blend mode and opacity set. 


. Select a blending mode from the drop-down list in the tool’s Property 


inspector. 


. If you want, set an opacity for the tool in the Property inspector by 


dragging the Opacity/Transparency slider (the button with the down- 
ward-pointing arrow between the Opacity text field and the blending 
mode list) or typing a value in the Property inspector’s Opacity text 
field. 


. Use the tool to make your vector shape or bitmap. 


The tool’s blend and opacity settings remain in effect until you change 
them. After you create an object, you can always adjust its blend and 
opacity settings. You may want to create a new layer (see the section 
“Adding and deleting layers,” earlier in this chapter) before making a 
new object. If you don’t make a new layer, remember that the object’s 
blend settings override the layer’s blend settings. 


Book Ill 
Chapter 5 


sawiely pue 
siaAe7 jo 13M0d ayy 


282 Managing Frames 





Figure 5-9: 
You can set 
a tool's 
blending 
mode by 
using the 
tool's 
Property 
inspector. 
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Managing Frames 


Given all that you can do with layers, you may be wondering why you need 
these things called “frames.” Frames are essentially sets of layers that let you 
do two things that layers alone can’t accomplish: 


+ Export multiple button states (different versions of the button, such as 
those versions that appear when the user rolls over or clicks the button) 
simultaneously 


+ Create and export animated GIFs (files that contain multiple GIF images 
displayed in sequence) 


You can think of layers as stacked one on top of the other; you may want to 
think of frames, on the other hand, as a series, each following the previous in 
the same location but at a later time, like a flip book. Each frame is distinct 
from the others. A given frame may share layers or objects with other frames, 
but the shared layers or objects usually change from one frame to the next 
(the objects are a different color, have a different effect applied to them, or 
are at different coordinates). These differences make up multiple button 
states or animated GIFs. 


Figure 5-10: 
The 
Duplicate 
Frame 
dialog box. 
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The Frames panel (see Figure 5-12) displays frames in much the same way as 
the Layers panel displays layers, except that the Frames panel doesn’t show 
the objects contained within each frame. 


Like layers, you can duplicate, add, and delete frames. You must have at 
least two frames in your Fireworks PNG file in order to export buttons with 
rollover states or animated GIFs. 


Adding frames 
By default, your Fireworks PNG has a single frame, which contains all the 
layers in the file. To add a frame to your file, just follow these steps: 


1. Click the Options menu (the bulleted list icon) at the top right of the 
Frames panel and choose Add Frames or Duplicate Frame from the 
menu. 


Choose Duplicate Frame if you want to copy the objects in the current 
frame to the new frames. Choose Add Frames if you want to add empty 
frames to your file. Either the Add Frames or Duplicate Frame dialog box 
(which you can see in Figure 5-10) appears, both of which have identical 
parameters. 





Duplicate Frame 


Numbers |1 ~ 
Insert new Frames 
D At the beginning 
O Before arent frame 
© After current frame 
O åt the end 


OK Cancel 








2. Enter a number or click the arrow next to the text field to use a slider 
to set the number of frames that you want to add: 


e For a simple rollover, you want one additional frame, for a total of 
two frames in your file. 


e If you want your button to have an on state as well as a highlight 
(rollover) and normal state, you want two additional frames, for a 
total of three frames. 


e If you want a highlight-while-on state, you want three additional 
frames, for a total of four frames. 


The slider goes from 0 to 10, but you can type in values higher than 10. 
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If your animated GIF has more than 20 frames, the file size may be too 
large for you to use. For complicated animations, you’re better off using 
Macromedia Flash 8 (see Book IV for more information on Flash). 


3. Select one of the options for where you want to add the new frames in 
reference to the current one. 


You have the following options: 


e At the Beginning: The first new frame becomes Frame 1 and the 
remaining frames are numbered sequentially, regardless of how many 
frames you currently have in your document, and regardless of which 
frame is currently active. 


e Before Current Frame: The frames are added before the currently 
active frame. 


e After Current Frame: The frames are added after the currently active 
frame. 


e At the End: The new frames are the last frames, no matter how many 
frames you already have or which frame is currently active. 


4. Click OK. 


Deleting and editing frames 


To delete a frame, click the frame in the Frames panel and drag it to the 
garbage can icon at the bottom right of the Frames panel. To delete multiple 
frames at once, Shift+click all the frames in the Frames panel that you want 
to delete and, while the frames are highlighted, click the garbage can icon at 
the bottom right of the Frames panel. 


You can select a frame for editing in two ways: 


+ Click the frame in the Frames panel. 


+ Click and hold the frame indicator at the bottom left of the Layers 
panel. A drop-down list appears, giving you easy access to all the frames 
in your document. Simply select the frame that you want to edit. 


Renaming frames 


You can easily rename frames: Double-click the frame’s name in the Frames 
panel and type the new name in the text field that appears. 


Using Frames to Create Rollovers and Animated GIFs 


Now that you know how to make and manage frames, you’re ready to use 
them! In this section we cover how to create rollovers and animated GIFs, 
both of which can add interest to your Web site. 
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Creating a rollover 

Creating a button rollover really just involves making two (or three or even 
four) versions of a button graphic, each on its own frame. Dreamweaver 8 
lets you generate rollover code pretty easily, but you can also have Fireworks 
make the rollover code along with the HTML. (See Book II for information on 
Dreamweaver.) 


To make a simple button rollover, follow these steps: 


1. Make a button, or set of buttons, using the processes outlined in Book 
III, Chapters 3 and 4. 


The button can have text or an icon, it can have a shape or bitmap 
under the text or icon, and it can be any shape or size you like (but you 
probably want to keep it on the small side to limit file size and leave 
room on your page for content). For easy housekeeping, if you’re creat- 
ing a navigation bar, keep all the buttons for which you want to have 
additional states on the same layer. 


2. Disable sharing across frames by double-clicking the layer and dese- 
lecting the Share Across Frames check box. 


By default, objects on layers aren’t shared across frames, so you may be 
able to skip this step. If a layer is shared across frames, changes to any 
objects in that layer appear in all frames. If a layer is shared across 
frames, the Shared icon (which resembles a ladder or strip of film with 
arrows on both sides) appears to the right of the layer name in the 
Layers panel. 
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3. Add one frame after the current frame by clicking the New/Duplicate 
Frame button in the Frames panel or by choosing Add Frames from 
the Frames panel’s Options menu (the bulleted list icon at the top 
right of the panel). 
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4. In Frame 2, edit the objects that make up your button to create a high- 
MBER lighted rollover state. 


The highlighted rollover state is the image that swaps in when the user 
rolls the cursor over the button. 


You can make the text a different color or add a glow to it, or you can 
make the vector shape or bitmap a different color. You have too many 
options to mention here, really. Just make sure that the user can notice 
the difference when he or she moves a cursor over the button. 


5. Make a slice overlaying the button graphic. 


See Book III, Chapter 6 for details on making slices, or just check out the 
“Cutting your objects with the Slice tool” section, earlier in this chapter. 
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Figure 5-11: 
You can see 
the current 
frame plus 
other 
frames 
with onion 
skinning on. 


6. Click and release the mouse button in the middle of the slice to access 
the Add Behavior pop-up menu and choose the Add Simple Rollover 
behavior. 


When a slice is active, you can see the Target icon in the middle of the 
slice. When you place your cursor over the target, it becomes a hand. 


If you want to test the rollover, click the Preview tab at the top of the canvas 
to make the Preview pane active. Place your cursor over your button in the 
Preview pane to see the Rollover behavior in action. Next, move the cursor 
off the button to see the button return to its normal state — the change from 
the rollover state back to the normal state is part of a Simple Rollover. 


You can add an on state (for when the user is on the Web page that the 
button represents) and a highlight-while-on state (for when the user rolls 
over the button on the Web page that the button represents) as simply as 
repeating Steps 3 and 4 in the previous list, and you can add more behaviors 
via the Behaviors panel. See Book III, Chapter 7 for further details. 


Creating an animated GIF 


You may find that you can most easily create an animated GIF by building one 
frame, duplicating it, editing that frame, duplicating it, and so on. Fireworks 
has a display mode called onion skinning, which you may find especially 
handy for building animated GIFs. With onion skinning turned on, as Figure 
5-11 shows you, you can see the frame you’re working on, plus dimmed ver- 
sions either of the next frame, the previous and next frames, or all frames. 
That setup can really help you pace your animation to get the illusion of 
smooth motion. 
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To activate onion skinning, just follow these steps: 


1. Click the Onion Skinning button (the downward-pointing pentagon) at 
the lower left of the Frames panel. 


The Onion Skinning menu pops up. 


2. Select one of the four options: 


Show Next Frame: Select the Show Next Frame option if you already 
have your frames set up and want to check frames two at a time. 


Before and After: Select the Before and After option if you want to 
see the previous and next frames, as well as the current frame. 


Show All Frames: Select the Show All Frames option to see all the 
frames at once. 


Custom: Select the Custom option if you want to set the number of 
frames visible at once and to customize their transparencies. 


3. Leave the Multi-Frame Editing option selected if you want to be able 
to edit the objects in the visible but not current frames. 


Use the Select Behind tool to select objects in frames other than the cur- 
rent one. 


When you duplicate a frame, you duplicate the objects in it. When you edit 
an object in a frame, though, you change only that instance of it. In our bowl- 
ing ball animation, which you can see in Figure 5-11, we rotate the ball (as 
well as moved it left) in each frame to give the illusion that the ball is rolling. 
If we want to, we can make the ball a different color in each frame, as well. 


Setting the frame rate 

The frame rate is the speed at which each frame follows the previous frame. 
You can use the same rate all the way through the animation, or you can set 
individually the amount of time each frame stays on-screen. 


To set a constant frame rate, follow these steps: 


1. Click the first frame and Shift+click the last frame in the Frames panel 
to select all the frames. 


All the frames highlight. 


2. Double-click the frame delay column (the right-hand column) of any 
frame in the Frames panel. 


The Frame Delay dialog box appears. 
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3. Type a number in the Frame Delay text field to set the amount of 
time in hundredths of a second that you want each frame to remain 
on-screen. 


If you want the frames to stay on-screen for more than a second, you 
need to type a number over 100. For example, if you type 350, each 
frame stays on-screen for 3.5 seconds. You don’t get much of an illusion 
of motion at that frame rate, however! The less time that you have each 
frame on-screen, the more frames of your animation appear each second. 
The more frames per second, the smoother the animation looks. But the 
more frames you have in your animation, the bigger the file. 


4. Press Enter. 
To change the amount of time one frame stays on-screen, follow these steps: 


1. Double-click the frame delay column (the right-hand column) of any 
frame in the Frames panel. 


The Frame Delay dialog box appears. 


2. Type a new number in the Frame Delay text field to set the amount of 
time in hundredths of a second that you want the frame to remain on- 
screen. 


3. Press Enter. 


To loop or not to loop 


Fireworks lets you loop your animation, which causes it to automatically 
start over at the beginning after playing the last frame. You can have the GIF 
loop indefinitely, you can set it to play once (stopping at the last frame), or 
you can make it play a designated number of times and then stop on the last 
frame. 


The default for animated GIFs is to loop endlessly. To make a GIF that stops 
at the final frame, just follow these steps: 


1. Click the GIF Animation Looping button (the oval with an arrow) at 
the bottom of the Frames panel. 


The Looping pop-up menu appears. 


2. Select the number of times you want the animation to repeat, or select 
No Looping if you want it to play only once. 


Because you're setting the amount of times you want it to repeat, if you 
select 1, that means the animation plays twice through and stops. After 
you have made your choice, the choice appears next to the Loop button, 
as you can see in Figure 5-12. 





Figure 5-12: 
The Frames 
panel 
shows the 
frames’ 
settings. 
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The Frames panel, which you can see in Figure 5-12, shows what mode of 
onion skinning is on, if any, and on which frames (first column); it also shows 
the frame name (second column), frame delay (third column), and looping 
information (bottom). 


Previewing animated GIFs 

You can preview animated GIFs in the Preview pane (click Preview at the top 
of the canvas to view the Preview pane) or in the Original pane. You have 
access to these controls in the order that they appear from left to right at 
the bottom of the pane: 


+ Goto first frame 

+ Play/Stop 

+ Goto last frame 

+ Go back one frame 

+ Go forward one frame 
The animation plays at the frame rate that you have set for it (see the sec- 
tion “Setting the frame rate,” earlier in this chapter), and conveniently, you 
can adjust the frame rate in the Frames panel without leaving the Preview 


pane. Your animation loops in the Preview pane, even if you don’t have it set 
to loop for export. Onion skinning is not visible in the Preview pane. 
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Chapter 6: Slicing Up 
Content for the Web 


In This Chapter 


Creating, using, and editing slices 
Making your images Web-ready 
Getting a sneak preview of your slices 
Fitting hotspots to your slices 
Exporting your images for the Web 


A fter you design your page, you need to figure out how to translate your 
design to the Web. If you’re planning to export HTML as well as images 
from Fireworks and don’t want to mess with the code afterward, you don’t 
have to. When you want to make changes to the Web page, you can do so in 
Fireworks and then re-export the HTML and images. 


Of course, you can also export all the images from Fireworks but generate the 
HTML code by hand. Regardless of your Web-coding skill level or your site 
maintenance needs, you probably want to slice and optimize your images, 
and you can do so easily with Fireworks. The following section explains the 
whys and hows of slicing your design in Fireworks; for more information on 
image optimization, see the “Optimizing Your Images for the Web” section, 
later in this chapter. 


Exploring the Advantages of Using Slices 


When you slice a page layout, like the one in Figure 6-1, you want to optimize 
(reduce the file size of) your images so that you can reconstruct your design 
with HTML in such a way as to balance image quality with download time. 


Slicing your design offers two advantages: 


+ Individually optimized images: You can compress each sliced image by 
a different amount by using the most appropriate method, giving you 
maximum control over the balance between image quality and down- 
load time. 
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Figure 6-1: 
This layout 
is sliced into 
exportable 
images. 








+ Gradual download: The browser displays each sliced image as it down- 
loads to the user’s computer, so the page appears to build gradually. 
Users find watching this process much more interesting than staring at a 
blank screen waiting for a complete page to load all at once! 
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When you use slices in combination with frames, you gain other advantages 
(for more on frames, see Book III, Chapter 5). You can export multiple images 
simultaneously from a single slice, which is the easiest way to make buttons 
that change based on user actions. (See the “Exporting Images” section, later 
in this chapter, for the details on exporting multiple images from a single 
slice.) 


You can easily make a Web page with a single image, but that page may take 
too long to download on a dial-up modem because the image file is so large. 
That’s where slices come in. Although you don’t have a minimum or maxi- 
mum number of slices that you can make on a page, you don’t want to make 
too many slices. Having a lot of teeny-weeny images can give you a page that 
loads too gradually. You need to find a good balance. 


Every image tag in a Web page’s HTML code results in a call to the Web site’s 
host server. The more images that you have on your page, the more requests 
for images the browser has to make, and the more images the server has to 
send. That process can feel like having a waiter bring you a salad one piece 
of lettuce at a time — with you having to request each piece! 
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Creating and Editing Slices 


< MBER 


In Book III, Chapter 5, we cover the basics of how to make a slice, but here we 
give you some more details. So you don’t have to flip back to the previous 
chapter, here’s a reminder on how to make a slice in your Fireworks PNG file: 


1. Select the Slice tool from the Web section of the Tools panel. 
2. Click and drag diagonally on the canvas to make a rectangle. 


The slice shows up as a green overlay on the canvas. 


The default appearance of the slice is as a bright green semitransparent 
overlay. You can change the default color of slices in the Preferences settings 
if you need to make the underlying images easier to see. You can also change 
the color of an individual slice in the Property inspector when you have the 
slice selected. Changing a slice color doesn’t affect the underlying image in 
any way. 


One handy feature of the Slice tool is its snap feature. If you have navigation 
buttons on the left side of your page, you may want the buttons all to be the 
same width to simplify your HTML. When you have a single slice made for 
your first button and you click and drag to make the slice for the second 
button, Fireworks snaps to the identical width when you have your cursor 
within a few pixels of it. Of course, you can also make sure they’re the same 
width by typing a value into the width text field, or by copying and pasting 
the slice. 


Naming a slice 

When you name a slice, you’re doing more than making it easy to identify in 
the Layers panel — you’re also naming the image for export. For that reason, 
when you name a slice, you want to avoid using spaces or any special char- 
acters that are illegal in filenames (Windows filenames cannot contain the 
following characters: \/:*? “<> 1). 


To name or rename a slice, just follow these steps: 


1. Double-click the current name of the slice in the Layers panel. 


A text field pops up, as you can see in Figure 6-2. By default, slices are 
named “Slice.” If you don’t see the slices, you may have to expand the 
Web layer by clicking the plus (+) button at the left. 


2. Type a new name for the slice. 


3. Press Enter. 


Book III 


2 
qom apoy $ 
= 


}u3}u09 dn uns 


2 Ih Creating and Editing Slices 





Figure 6-2: 
Naming a 
slice that 
contains a 
top 
navigation 
button. 
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When you select a slice, the Property inspector gives you access to the 
slice’s name, dimensions, position on the page, and more. You can also 
change the name of the slice in the Property inspector rather than in the 
Layers panel. 


Moving a slice 


You may find that you need to move a slice. For example, if you move some 
elements in your design a few pixels one way or the other, the image under- 
lying the slice may shift enough that you need to adjust the slice’s position. 
You can choose between three basic ways of moving a slice: 


+ Move a slice by clicking and dragging the slice. (In most cases, you prob- 
ably want to use this method.) 
+ Use the arrow keys to move a slice. 
+ Change the X and Y coordinates of the slice in the Property inspector. 
If you overlap slices on the canvas, the overlapped area only appears in the 


image created from one of the slices — the one that appears higher in the 
Layers panel. 


To move a slice using the click-and-drag method, just follow these steps: 


1. Click the slice on the canvas. 


You can click anywhere on the slice except the corners and the center. 
Clicking a corner or the center of a slice gives you special options. 


2. Hold down the mouse button and drag the slice to its new location. 


If you want finer control when you move a slice, you can use the arrow keys 
to move a slice as follows: 


1. Select the slice by clicking it on the canvas or in the Layers panel. 


2. Press the appropriate arrow key. 
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Each time you press an arrow key, the slice moves by one pixel. If you 
hold down the Shift key and then press an arrow key, the slice moves by 
ten pixels. 


Sometimes, when you want to line something up along one axis, you can most 
easily line it up by selecting slices and typing the new X or Y coordinate for 
each slice. The top-left corner of the canvas always has the coordinates (0, 0), 
and coordinates are expressed in the form (X, Y), with X representing the hori- 
zontal coordinate and Y representing the vertical coordinate. If your design is 
800 pixels wide and 600 pixels high, the bottom-right corner has the coordi- 
nates (800, 600). 


To move a slice when you know the exact pixel coordinates to which you 
want to move it, follow these steps: 


1. Select the slice by clicking it on the canvas or in the Layers panel. 
The Property inspector changes to give you access to slice parameters. 


2. If you want to change the slice’s horizontal position, type a numerical 
value in the Property inspector text field labeled X: and press Enter. 


Your slice shifts left if you type in a lower number or right if you type in 
a higher number. 


3. If you want to change the slice’s vertical position, type a numerical 
value in the Property inspector text field labeled Y: and press Enter. 


Your slice shifts up if you type in a lower number or down if you type in 
a higher number. 


Resizing a slice 

Sometimes, after you make a slice, you decide you need to resize the under- 
lying image. After you resize the image, you may want to resize the slice. You 
may also need to resize a slice if you draw the slice quickly and don’t make 
it big enough. As with moving a slice, you can resize a slice by clicking and 
dragging or by typing new values. 


To resize two dimensions of a slice at once by using the click-and-drag 
method, follow these steps: 


1. Click a corner of the slice. 


You have to click a handle at one of the corners in order to resize the 
slice. If you click anywhere inside the slice (except the exact center) and 
drag, you move the slice instead of resizing it. 


2. Drag the handle on the corner of the slice to the new location that you 
want. 


Book Ill 


g 
qom apoy $ 
juajuoj dn unis = 


2 96 Creating and Editing Slices 


ar 


Figure 6-3: 


Dragging 
the right 
edge of a 
slice to 
make it 
wider. 





If you only want to change the height, click and drag the top or bottom 
border of the slice. If you only want to change the width, click and drag the 
left or right border of the slice. When your cursor is over the border, it 
changes into the Resize cursor, two parallel lines with an arrow pointing out- 
ward from each line, as you can see in Figure 6-3. 
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When you’re creating slices, their edges snap to edges of already created 
slices, so you may find getting the edge of a slice where you want it difficult. 
You can zoom in until you reach a magnification at which you can resize the 
slice so it doesn’t snap to the edge of the other slice, or you can use the text 
fields in the Property inspector to change the selected slice’s dimensions. 


To resize a slice by typing new values, follow these steps: 


1. Select the slice by clicking it on the canvas or in the Layers panel. 


The Property inspector changes to give you access to the slice’s 
parameters. 


2. If you want to change the slice’s width, type a new numerical value in 
the text field labeled W: and press Enter. 


If you increase the width, you add pixels to the right side of the slice. If 
you decrease the width, you take pixels away from the right side of the 
slice. 


3. If you want to change the slice’s height, type a new numerical value in 
the text field labeled H: and press Enter. 


If you increase the height, you add pixels to the bottom of the slice. If 
you decrease the height, you take pixels away from the bottom of the 
slice. 


Duplicating a slice 

If you have a series of buttons, each of which you want to be the same width 
and height, you can make one slice and duplicate it as many times as you 
need. Of course, you also need to move each duplicated slice to overlay a 
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different button and name each slice according to the button it overlays. To 
duplicate a slice, just follow these steps: 

1. Select the slice by clicking it on the canvas or in the Layers panel. 

2. Choose Edit™Duplicate or use the key command Ctrl+Alt+D. 


A duplicate slice appears on top of, but slightly offset from, the slice that 
you duplicated. 


If you clone the slice instead of duplicating it (Edit™Clone or 
Ctrl+Shift+D), the new slice appears directly on top of the old one. 


You can also copy and paste a slice, though that’s essentially the same 
as cloning, except that it takes an extra step! 


3. Move the slice to its proper location. 
See the “Moving a slice” section, earlier in this chapter, for instructions. 
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In order to understand the process of optimization, you need to know about 
image compression. When you compress an image, you reduce its file size by 
reducing the amount of data in the file. The two main types of image com- Sri 


pression are Chapter 6 
+ Lossy: Some data is discarded from the image to make the file smaller. n 
+ Lossless: The data in the image is described in a more efficient way, Ss a. 

which makes the file smaller. =a 
os 

The two main compression methods used to format images for the Web are = S 

3 
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+ JPEG: A lossy method, best used for photographs, gradients, and other 
complex images that have lots of colors. 


+ GIF: A generally lossless method, best used for images with large 
areas of flat color, like company logos. GIF images can have transparent 
backgrounds. 


Not sure which compression method you want to use for a particular slice? 
The Preview panes come in handy for this job. You can use a Preview pane 
any time that you have slices. They show you what the image looks like at 
your chosen compression setting (or settings). See the section, “Previewing 
Slices,” later in this chapter, for the details. 


You can deal with compression by making a setting when you first make the 
slice and making the fine adjustments later. It doesn’t really matter, though. 
You can just leave each slice at the default setting until you’re ready to export. 
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Figure 6-4: 


The 
Optimize 
panel with 
a default 
JPEG 
setting 
selected. 





Working with the options in the Optimize panel 


By default, the Optimize panel sits at the top right of the Fireworks window. 
You can’t see it onscreen; choose Windows™Optimize or press F6 to open it. 
Figure 6-4 shows the Optimize panel as it appears when you expand it and 
select a slice. 
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The top drop-down list displays a saved setting. A saved setting is a group of 
optimization options that includes the export file format and options appro- 
priate to the selected export file format (“Making a JPEG” and “Making a GIF” 
tell you about the main export file formats — JPEG and GIF — and the options 
specific to each). 


Under the Saved Settings drop-down list, you can find the Export File Format 
drop-down list. If you use a default setting from the Saved Settings drop-down 
list, Fireworks automatically shows the file format in the lower list. Otherwise, 
you have to select the export file format. We only look at JPEGs and GIFs in 
this book because those file formats are by far the most common Web for- 
mats, but you can find the full list of file formats that Fireworks can export in 
the sidebar “Other export file types,” later in this chapter. 


We discuss the options displayed in the Optimize panel in the following sec- 
tions, “Making a JPEG” and “Making a GIF.” The Options button (the bulleted 
list icon) at the top right of the Optimize panel provides access to the Options 
menu, which offers its own set of choices. The items in the Options menu 
vary, depending on the file type that you select in the Export File Format 
drop-down list. 


When you have JPEG selected, the Options menu offers the following: 


+ Save Settings: This option lets you preserve your current compression 
setting as a preset, which you can then select from the Saved Settings 
drop-down list in the Optimize panel. You may find presets (custom or 
not) useful for batch processing images (automating the export of multi- 
ple images that use the same settings). 
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Delete Settings: This option does what you probably expect — it deletes 
your custom compression settings. 


This option deletes all the settings. 


Optimize to Size: This handy option lets you set a target file size for 
your slice. Fireworks then makes the appropriate compression settings 
to produce a file of your specified size. 


Export Wizard: The Export Wizard walks you through the steps of export- 
ing an image with a series of dialog boxes. 


Progressive JPEG: If you have this option selected when you export a 
slice, your JPEG contains two versions of your image. The first is a low- 
resolution version of the image that loads relatively quickly to a browser. 
The second, which fills in over the first, is a higher-resolution version. 
Although you need a shorter amount of time for this type of image to 
become visible, you have a longer overall download time. 


If you need your JPEG large (in terms of width and height) and high- 
quality, consider exporting it as a progressive JPEG. 


Macromedia Flash can’t dynamically import progressive JPEGs, so if you 
want to link to a JPEG from an SWF file without embedding the graphic 
in the Flash movie, make sure you don’t export the graphic as a progres- 
sive JPEG. 


Sharpen JPEG Edges: Select this option if you need to make image clar- 
ity a priority (if, for example, you have small text in the image). Clarity 
makes for larger file sizes. 


Remove Unused Colors: When this option is selected, as it is by default, 
Fireworks removes any color from the image’s palette that the image 
doesn’t use. Smaller palettes mean smaller file sizes. 


Show Swatch Feedback, Load Palette, Save Palette: These options apply 
to 8-bit graphics (including GIFs; JPEGs are a 24-bit format). Custom 
palettes are sets of colors to which you can limit images. See the 
Fireworks Help files or online resources for further details. 


Help, Group Optimize With, Close Panel Group: These options don’t 
relate only to JPEGs. See Book III, Chapter 1 for more information about 
general panel options. 


When you have GIF selected from the Export File Format drop-down list, the 
Options menu makes some JPEG-specific options unavailable but offers the 
following GIF-specific (8-bit graphic specific) options: 


+ Interlaced: An interlaced GIF is similar to a progressive JPEG. A low- 


resolution version of the graphic loads first (and fast), and the image 
slowly transitions until it’s at its maximum resolution. As with progres- 
sive JPEGs, the image loads faster initially, but the final version of the 
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image doesn’t load as quickly as it would if you hadn’t interlaced it. (You 
can also export an interlaced PNG, which downloads in stages like an 
interlaced GIF but has the larger file size of an uncompressed image.) 


+ Remove Unused Colors: When this option is selected, as it is by default, 
Fireworks removes any color from the image’s palette that the image 
doesn’t use. Smaller palettes mean smaller file sizes. 


For information about the default GIF settings, see the section “Making a 
GIF,” later in this chapter. 


Under the Optimize panel name, you can find the Saved Settings drop-down 
list, which offers seven default settings (two for JPEGs and five for GIFs). You 
can read about the GIF default settings in “Using the default GIF settings,” 
later in this chapter. You can choose between two default settings for JPEGs: 


+ JPEG — Better Quality: Makes a high-quality image, which results in a 
bigger file size and a longer download time. 


+ JPEG — Smaller File: Makes a small file, with a corresponding loss in 
image quality. 


The rest of the parameters in the Optimize panel vary based on what export 
file format you choose. You can find out about them in the following sections, 
“Making a JPEG” and “Making a GIF.” 


Making a JPEG 

Because JPEG is a lossy compression method, you want a fair amount of con- 
trol over just how much data gets discarded from your image. The higher 
the amount of compression, the lower the image quality — but also the 
smaller the file size and consequently the faster the download time. Fireworks 
gives you a few options so you can maximize image quality while minimizing 
file size. 


Using the default JPEG settings 


You can easily use a default setting on a slice. Just follow these steps: 


1. Select the slice by clicking it on the canvas or in the Layers panel. 


2. Select either JPEG — Better Quality or JPEG — Smaller File from the 
Settings drop-down list in the Optimize panel. 


The Image Type, Quality, and Smoothing drop-down lists update accord- 
ing to the setting that you choose. 
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Other export file types 


Fireworks can export these other image types ™ BMP: Bitmap is the default image format 


in addition to JPEGs and GIFs: for PCs. 

PNG: By default, Fireworks saves imagesin PICT: Fireworks on the Macintosh can 
the PNG file format. Fireworks stores extra export an image in the Mac-native image 
information in PNGs that other applications format, PICT. 


opening the same file can't access. PNGs 
can have transparent backgrounds, and 
you can view them in Web browsers. PNG 
is a Macromedia Flash-friendly format. 


1# WBMP: A 2-bit format (black and white only) 
created especially for wireless devices, Al: The native file format for Adobe 


Fireworks 8 can also save your documentin the 
following formats, though you may lose some 
editing ability in the conversion process: 


1#” SWF: The Flash animation export format 








such as PDAs and cell phones. Illustrator 
TIFF: You can use this format for print ~ PSD: The native file format for Adobe 
materials. Photoshop 
Using custom JPEG settings Book Ill 


To make or edit a custom JPEG setting, follow these steps: 


1. Select the slice by clicking it on the canvas or in the Layers panel. 


2. Select JPEG from the Export File Format drop-down list in the 
Optimize panel. 
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3. Type a number in the Quality text field or use the slider (click the 
button next to the text field with the downward-pointing arrow to 
activate the slider) to set the image quality. 


You can enter any whole number from 0 to 100, with 0 representing the 
lowest quality and 100 the highest. 


If you need a part of your image a higher quality than the rest, follow the 
following set of instructions, which describe using the Selective Quality 
option. 

4. Set the smoothing, if you need to. 
Smoothing blurs the image a little, reducing its quality but also reducing 
its file size. You can type or select any whole number from 1 to 8, with 1 


representing the least blurring and 8 representing the most blurring. If 
you don’t want smoothing, leave it at its default setting, 0. 


The Selective Quality option in the Optimize panel lets you compress differ- 
ent parts of your image by different amounts. In some cases, you can use 
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Selective Quality as a great alternative to cutting a photograph into different 
slices set at different compression levels. 


Here’s how to use the Selective Quality option: 


1. Click the Original button at the top left of the canvas if you aren’t 
already viewing the Original pane. 


2. Use a Selection tool to select the area of the image that you want to 
compress differently than the rest of the image. 


3. Choose Modify™Selective JPEG™Save Selection as JPEG Mask. 
Your JPEG mask shows up as a pink overlay. 


4. Select JPEG from the drop-down list in the Optimize panel, if it’s not 
already selected. 


5. Click the Selective Quality button (the pencil and paper) in the 
Optimize panel. 


The Selective JPEG Settings dialog box, which you can see in Figure 6-5, 
appears. 


Figure 6-5: 
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6. Make sure the Enable Selective Quality check box is selected in the 
Selective JPEG Settings dialog box (it’s checked by default). 


7. Type a number from 0 to 100 in the text field. 


Zero represents the lowest quality; 100 represents the highest quality. 
Typically, the number you input in the Selective Quality text field is 
higher than the number in the main JPEG Quality text field (see “Using 
custom JPEG settings”). 


8. Change the overlay color if you don’t like the default overlay color. 


The overlay color doesn’t affect the exported image, only how the PNG 
file appears onscreen when you view it in Fireworks. 
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9. Select the Preserve Text Quality check box if you want to preserve the 
quality of any text within your selection, regardless of the overall 
compression settings. 


You can use this handy shortcut with or without a JPEG mask. 


10. Select the Preserve Button Quality check box if you want to preserve 
the quality of any buttons within your selection, regardless of the 
overall compression settings. 


11. Click OK or press Enter. 


Making a GIF 


Okay, when we say that the GIF compression method is generally lossless, 
we mean this: You can make lossless GIFs, but you can also make lossy GIFs 
if you need to. GIFs compress image data in a couple of ways: 


+ By keeping track of the data more efficiently: GIFs group adjacent pixels 
of the same color in each row of the image so the pixels can be described 
as a group rather than as individual pixels. The fewer colors that you 
have in each row, and the more pixels of the same color that are together 
in a line, the better GIF compression works. 


+ By limiting the number of colors in an image: You can create custom 
palettes (sets of colors) or use the specialized built-in palettes that 
Fireworks offers. If you compress your image with a palette that doesn’t 
contain all the colors in the image, Fireworks substitutes colors from the 
palette, effectively reducing the number of colors in the GIF, as com- 
pared to the source image. 


Sometimes you can simulate the appearance of the lost color by dither- 
ing two colors from the palette. You can find out more about dithering in 
the section on Web safe colors in Book III, Chapter 2. 


Using the default GIF settings 
Fireworks offers several default Saved Settings for GIFs (available from the 
Saved Settings drop-down list at the top of the Optimize panel): 


+ GIF Web 216: This setting limits the colors in your GIF to the basic Web 
safe palette. 


+ GIF Web Snap 256: This setting limits the number of colors in your GIF 
to 256, while snapping any colors close in appearance to Web safe colors 
to the Web safe palette. 


+ GIF Web Snap 128: This setting limits the colors in your GIF to 128, while 
snapping any colors close in appearance to Web safe colors to the Web 
safe palette. 
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Figure 6-6: 
A button’s 
settings in 
the Optimize 
panel. 










+ GIF Adaptive 256: This setting limits the colors in your GIF to the 256 
most common in the GIF. Other colors are changed to the closest color 
in the palette. This setting gives you the highest fidelity GIF version of 
your image. 


+ Animated GIF Web Snap 128: This setting is the same as GIF Web Snap 
128, but for animated GIFs. 


Using custom GIF settings 


To make a basic GIF that doesn’t use a Fireworks default setting, just follow 
these steps: 


1. Select a slice by clicking it on the canvas or in the Layers panel. 


2. Select GIF from the Export File Format drop-down list in the Optimize 
panel, which you can see in Figure 6-6. 


The Optimize panel, which Figure 6-6 shows you, displays the setting for 
a top navigation button. Transparency appears as a checkerboard pat- 
tern in the palette. And because you are creating a custom setting, the 
Saved Settings field is blank. 
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3. Set the compression mode by selecting one from the Indexed Palette 
drop-down list (right below the Export File Format drop-down list). 


Palettes are sets of colors. For GIFs, the palettes may contain no more 
than 256 colors. For Web images, choose from the top four: 


e Adaptive 

e Web Adaptive 
e Web 216 

e Exact 


For more information about these palettes, see the Fireworks Help files, 
which you can access via the Fireworks Help menu. 


4. 
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Type a number in the Colors text field or use the drop-down list to set 
the number of colors in your palette, if you’re not compressing by 
using the Web 216 or Exact settings. 


The fewer colors that you have in your palette, the smaller the file size 
of your image. If you have fewer colors in the palette than in your image, 
however, Fireworks has to substitute colors, deteriorating image quality. 
If your image has more than 256 colors, you may get better results using 
a JPEG setting. 


. If you have more colors in your image than in your palette, and if you 


prefer dithering to straight one-for-one color substitutions, type a per- 
cent in the Dither text field or use the slider (click the button next to 
the text field with the downward-pointing arrow to activate the slider) 
to set a percentage from 1 to 96. 


The more you dither, the fewer colors you need in your palette. 
Unfortunately, dithering can look pixelated up close and increases the 
file size. 


Making a transparent GIF 


To make a GIF with transparent areas, which allow the HTML page back- 
ground color or background image to show through, follow these steps: 


-= 


. Select a slice by clicking it on the canvas or in the Layers panel. 


. Select GIF from the Export File Format drop-down list in the Optimize 


panel, if GIF isn’t already selected. 


. Select Index Transparency from the Transparency drop-down list. 


The default is No Transparency. Even when you don’t have a background 
in your PNG file, you still need to select Index Transparency to make a 
GIF with transparent pixels. Otherwise, your GIF will have a solid white 
background. 


. Click the eyedropper button with the equal sign () to select a color in 


the palette or on the canvas that you want to make transparent. 


The three transparency eyedropper buttons are at the bottom left of the 
Optimize panel. The selected color becomes transparent in the palette 
in the Optimize panel. If you’re viewing a Preview pane, the transparency 
appears (or disappears, we should say) on the canvas. 


. Use the eyedropper with the plus sign (+) to select additional colors 


that you want to make transparent. 


You can use the eyedropper with the minus sign (-) to restore opacity to 
a color that you make transparent, if you need to. 
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Previewing Slices 





Figure 6-7: 
The 
checker- 
board 
behind the 
Bowling 
Balls button 
indicates 
the slice’s 
back- 
ground is 
transparent. 


You can optimize your slices as you make them, or you can make all your 
slices first and then optimize them all at once. Either way, if you’re having 
trouble deciding on the best method or amount of compression to use ona 
slice, you can use one of the three Preview panes to help you make an 
informed decision. Just click one of the following buttons at the top of the 
canvas: 


+ Preview: This view shows a single version of your canvas, where you 
can see what your slices will look like and how big their file sizes will be 
at your current compression settings. Click a slice to preview it. 


+ 2-Up: This view puts two versions of your canvas side by side, so you 
can compare the original image with a compressed version of the image, 
or you can compare two compressed versions to each other. Click a slice 
on either side to preview it on both sides. 


+ 4-Up: This view divides the work area into quadrants, so you can com- 
pare three compression settings at once to the original image. Click a 
slice in any quadrant to preview the settings in all quadrants. 


In the Preview panes, slices that aren’t currently selected look slightly pale, as 
if you’re looking at them through a fogged-up window. Selected slices look as 
they will when you export them, given their current settings (including trans- 
parencies, which appear as checkerboards), as you can see in Figure 6-7. 




















~) 


< > 
571 bytes 0 sec 56kbps GIF (Slice) 4 4 Toas 1024x768 300% ~ 




















Previewing Slices 307 


The Preview pane 


You can select the Preview pane by clicking the Preview button at the top 
left of the image’s window, right above the canvas. 


The Preview pane previews more than just the appearance of your image; it 
also shows you the image’s projected file size and the amount of time it takes 
for a file that size to download at a particular download speed. (The default 
is 56 Kbps, or the approximate speed of a dial-up modem.) 


In Figure 6-7, you can see the file size, export file format, and download time 
stats at the bottom left, below the canvas. Because a 56 Kbps modem can 
download at a rate of 5K per second, and this image is a little over 0.5K, the 
download time shows as 0 sec (less than 1 second). 


When you change the settings in the Optimize panel, the size and download 
time information at the bottom of the Preview pane update automatically. The 
Optimize panel works the same way, whether you're looking at a Preview pane 
or the default Original pane. 


The 2-Up view 
You can select the 2-Up view simply by clicking the 2-Up button at the top 
left of the image’s window, above the canvas. 


The 2-Up view sets two versions of the canvas side by side. At the bottom of 
each pane, you can find an indicator of which view is in the pane and some 
of its vital statistics. In Figure 6-8, the pane on the right shows what the 
image would look like as a JPEG with the settings as shown at the bottom of 
the pane, and the pane on the left shows what the image would look like if 
exported as a GIF with the settings as shown at the bottom of the pane. 


You can click in either pane to select the slice and then adjust its settings in 
the Optimize panel. You can set the magnification of both panes several ways: 


+ You can use the Magnifying tool in the View section of the Tools panel. 


+ You can choose Zoom In, Zoom Out, or a preset Magnification setting 
from the View menu. 


+ You can select a zoom setting from the drop-down list at the bottom- 
right of the window. 


To toggle between an optimized setting and the original image, click the 
indented button at the left just below the canvas. A pop-up menu allows you 
to select Original (No Preview) or Export Preview. 
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Figure 6-8: 
Comparing 
two possible 
compres- 
sion settings 
side by side 
in the 2-Up 
view. 
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You can use the Hand tool from the View section of the Tools panel to move 
the canvas (select the Hand tool and then click and drag on the canvas) or 
just hold down the spacebar while you click and drag (whatever tool you’re 
using becomes the Hand tool automatically). When you move the canvas in 
one pane, the canvas also moves in the other pane. 


To select a different slice than the one currently selected, click the Pointer 
tool from the Tools panel and then click a slice in either pane or in the Layers 
panel. The slice becomes active in both panes simultaneously. 


The 4-Up view 

You can select the 4-Up view by clicking the 4-Up button at the top left above 
the canvas. When you first open the 4-Up view, the top-left quadrant displays 
the Original view, and the other three panes have identical compression set- 
tings. To change the settings in one pane, click in the pane to select it and 
then change its settings in the Optimize panel. In fact, you use the concept, 
properties, and processes of the 4-Up view just like you use those of the 2-Up 
view; you just get two extra panes. 


Figure 6-9 shows the 4-Up view. Comparing the three compression settings, it 
seems the one that best balances visual quality with file size is the GIF pane 
at the bottom right. 
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Figure 6-9: 
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Relating Hotspots and Slices 
N 
Slices can only be rectangular, which works fine if you have rectangular but- y 5 
tons. But what if you want to create nonrectangular HTML links to other Web = = 
pages? You have two choices: aS 
So 
+ Use the Polygon Slice tool to make a polygonal slice. This choice works S S 
best if the area that you want to use as a hyperlink is fairly isolated from e 


other slices. See Book III, Chapter 5 for details on the Polygon Slice tool. 


+ Use a Hotspot tool to draw hotspots on an image. Fireworks creates the 
underlying image, plus an image map. An image map is some HTML code 
representing coordinates for hyperlinked polygonal hotspots. Hotspots 
are areas on an image that you code to respond to user actions. 


Typically, the hotspots are hyperlinked to Web pages. In Figure 6-10, the 
bowling ball can be linked to a page about bowling balls, and the pin can be 
linked to a page with a list of bowling alleys. Don’t use hotspots more than 
you need to so you don’t add too much code to your HTML or tax the user’s 
processor with too many instructions. 
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If you’re not familiar with Web page coding, don’t worry. You don’t need to 
know all the ins and outs of HTML to make an image map — Fireworks takes 
care of that for you. You just have to create hotspots in the shapes that you 
want and export HTML with your images. See Book III, Chapter 7 for details 
on exporting HTML. 

Exporting Images 


You can export images in two ways: one by one or all at once. You can have 
Fireworks generate HTML at the same time that you export your images, or 
you can export the images only and write the code yourself in Dreamweaver 
(Book II describes how to use Dreamweaver). (Fireworks generates a less 
efficient code than code that you write in Dreamweaver, and you may find 
editing the Fireworks code more difficult than in Dreamweaver.) 


Exporting a single image 
To export a single image, follow these steps: 
1. Right-click a slice and select Export Selected Slice from the contextual 
menu. 


An Export dialog box appears, with default values set for exporting a 
single image. 


2. Navigate to the folder into which you want to put your image. 


Figure 6-11: 
The Export 
dialog box 
set to export 
HTML and 
images. 
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3. Leave the Save as Type setting at the default, Images Only. 
4. If you need to, rename the image. 


If you want the filename to be the same as the slice name, you don’t 
need to rename the image. 


Leave the Slices setting at the default, Export Slices. 


Leave the Selected Slices Only and Current Frame Only check boxes 
selected. 


7. Click the Save button. 


P g 


Exporting multiple image slices 
To export all the image slices in a PNG file at once, if you plan to write the 
HTML yourself, follow these steps: 

1. Choose FileExport or use the key command Ctrl+Shift+R. 


The Export dialog box appears, with default values set for exporting 
multiple images and HTML, as Figure 6-11 shows you. 
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2. Select Images Only from the Save as Type drop-down list. 


The options below the Save as Type drop-down list update to reflect 
your selection. 
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3. Leave the Slices setting at the default, Export Slices. 


4. Deselect the Include Areas without Slices check box if you need only 
the sliced images to build your HMTL page. 


5. If you have rollover images that you want to export, deselect the 
Current Frame Only check box if it’s selected. 


Remember, it takes multiple frames to make rollover images. 
6. Click the Save button. 


Exporting an animated GIF 


When you Save As an animated GIF, you also get a Macromedia Flash SWF 
option beyond the default Images Only option in the Save as Type drop- 
down list. Although that option does let you make some additional settings, 
if you want the ultimate format of the animation to be an SWF file rather than 
a GIF file, you probably want to open the PNG file in Macromedia Flash and 
export from there. Why? Because Macromedia Flash offers more powerful 
authoring and editing tools, many more export parameters than Fireworks, 
and ActionScript for adding complex interactivity to your animation. 


To export an animation as an animated GIF (not a Flash SWF movie), follow 
these simple steps: 


1. Select Animated GIF in the Optimize panel’s Export File Format drop- 
down list. 
2. Choose File™Export or use the key command Ctrl+Shift+R. 


The Export dialog box appears, with default values set for exporting ani- 
mated GIFs. 


3. Navigate to the folder into which you want the GIF to go. 


4. Leave the default Images Only setting in the Save as Type drop- 
down list. 


5. Click Save. 
You can do a lot more with the Export function than we cover in this section. 


For information on exporting HTML and other export options, see the sec- 
tion about advanced export functions in Book III, Chapter 7. 


Chapter 7: Advanced 
Fireworks 8 Tools 


In This Chapter 


Using advanced export options 
Creating image maps and advanced button rollovers 


Making your pages interactive with behaviors 


firon 8, like all the applications in the Macromedia Studio 8 suite, is 
deep and rich. In this chapter, we introduce some of the application’s 
more advanced capabilities, such as the following: 


+ Exporting HTML code with JavaScript/CSS. JavaScript is a coding 
language that you can use to make elements of your Web page change 
based on user feedback, among other things; CSS, which stands for 
Cascading Style Sheets, offers a different method of coding pop-up menus 
or arranging graphics and text on a Web page. If you add behaviors to 
your Fireworks PNG, you add either JavaScript or CSS to the HTML that 
Fireworks generates — you choose which type of code gets added when 
you export the HTML. 


+ Creating image maps with hotspots. 


+ Setting up button behaviors that go beyond simple rollovers. (See 
Book III, Chapter 5 for instructions on how to create simple button 
rollovers.) 


+ Using the Image Swap behavior to make an image on your Web page 
change when the user rolls over a separate image. 


Using Advanced Export Options 


In Book III, Chapter 6, we describe how to export images, but not how to 
export HTML or other types of files. If you’re designing a Web page and you 
have behaviors or hotspots in your Fireworks PNG file, you want to export 
HTML along with your images because the HTML and JavaScript or CSS 
code make hotspots and behaviors work in Web pages. 
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Figure 7-1: 
The Export 
dialog box 
offers 
different 
options, 
depending 
on which 
option you 
choose. 


When you want to export any type of file from Fireworks, you first have to 
choose File™Export or press Ctrl+Shift+R to bring up the Export dialog box, 
which you can see in Figure 7-1. The Save as Type drop-down list in the 
Export dialog box offers access to an array of extra options: 
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HTML and Images: Exports HTML (or other Web language) code, as well 
as images. 


Images Only: Exports images at your chosen optimization settings. 


Dreamweaver Library (.1bi): Exports Library items, as well as 
images. (Library items are snippets of HTML code that you can use in 
Dreamweaver to make site maintenance easier.) 


CSS Layers (. htm): Allows you to export layers, frames, or slices as 
Cascading Style Sheet layers, so Fireworks generates both images and 
CSS-based HTML code, placing each layer, frame, or slice in its own CSS 
layer (for information about working with CSS layers in Dreamweaver, 
see Book II, Chapter 5). 


Director (. htm): Exports either layers or frames as images that you can 
import into Macromedia Director MX for use in Shockwave movies. 
(Director is not part of the Macromedia Studio suite, so we don’t cover 
it in this book.) 


Layers to Files: Exports each layer in the current frame as a separate 
image file, which you may find useful if you’re planning to use the layers 
to build an animation in another application. 
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+ Frames to Files: Exports each frame as a separate image file, which you 
may find useful if you’re planning to use the frames to build an anima- 
tion in another application. 


+ Lotus Domino Designer: Exports either the top four layers, the top four 
frames, or the first four frames of each slice as separate files. Domino is 
an IBM Web-based collaboration tool. 


Using the Save As command offers you additional formats not available 
through the Export command, including the following: 


+ Macromedia Flash SWF: Exports an SWF file, which you can view via the 
Flash browser plug-in and import into Macromedia Flash. Macromedia 
Flash is a much more flexible authoring tool for SWFs. See Book IV for a 
wealth of information about Flash. 


+ Illustrator 7: Exports either the current frame, leaving layers intact, or 
exports a document in which frames are converted to layers. Illustrator is 
a design program from Adobe (the company that also makes Photoshop). 


+ Photoshop PSD: Exports the PNG as a layered Photoshop document 
(PSD). You can choose to maintain edit ability over text layers and 
effects, which may result in variations in appearance between the two 
files, or to maintain the appearance by giving up edit ability over text 
and effects. Remember, your PNG’s Web layer doesn’t get exported. 


Although you may want to export any of these types of files, we focus on the 
HTML and Images option in the following sections. You probably use this 
option the most. 


Readying your PNG for HTML export 


If you’re using Fireworks to generate your HTML code, you probably have 
buttons in your design that you want linked to other pages on your site. Or 
perhaps you have one or more hotspots in your PNG, and you want those 
hotspots to link to other pages on your Web site. Naturally, Fireworks makes 
it easy for you to add URLs to create the hyperlinks for buttons and hotspots. 
You just need to plan ahead: Prepare HTML document names (about.htm or 
contact.htm, for example) to all the pages to which you want to link from 
your current page. 


To add a URL to an existing slice or hotspot in the document’s Web layer 
(see Book III, Chapter 6 for information on creating slices), just follow these 
steps: 


1. Select the slice or hotspot by clicking it on the canvas or in the Layers 
panel (if you need to, open the Layers panel by pressing F2 and/or 
expand the panel by clicking the panel name). 
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The Property inspector is updated to show information about the 
selected slice or hotspot. 


2. Click in the Link text field in the Property inspector. 


If you have added links to other slices or other hotspots, those links 
appear as drop-down list choices in the Link text field. 


3. Type a URL. 


If you’re linking to a page on your own site and you have all your HTML 
pages in the same folder, simply type the name of the HTML document 
(for example, index.htm or help.htm). You have to type the name of 
the document exactly as it appears. (If you type index.htm but your 
home page is actually index .htm1, the link doesn’t work.) 


If you're linking to a page not on your site, include the complete URL 
(such as http: //catalog. dummies .com/booksanddownloads.asp). 


4. Press Enter or click anywhere on the canvas. 


Exporting HTML with your images 

If you want, you can tell Fireworks to generate the HTML along with the opti- 
mized images for your Web page and make that the end of it. If you plan to 
make any changes to the HTML in Dreamweaver or another HTML editor, 
however, you can set some options to control the way Fireworks sets up 
tables in the HTML it generates, which can make your Web page mainte- 
nance a little easier down the line. 


To export HTML and images that you plan not to update, or that you plan to 
update in Fireworks rather than Dreamweaver, follow these steps: 


1. Set up a folder structure for your Web site on your hard drive. 


You need a master folder that holds every file for your site. Inside the 
master folder, you may want to put an images folder, which can hold all 
your images, keeping them separate from the HTML documents. You can 
have your HTML documents and image files all mixed together in the 
master folder, but if you have a lot of images, you can find and work with 
all the files much more easily if you create a separate folder for the 
images. 


2. Check to make sure all the right layers are visible (or not visible) in 
your PNG file. 


Remember, the exported image files include only visible layers and 
objects. If you don’t see it onscreen now, it won’t be exported. See Book 
II, Chapter 5 for details on making layers visible/invisible. 


10. 


11. 
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. In Fireworks, choose File~Export or press Ctrl+Shift+R. 


The Export dialog box appears. 


. Navigate to the Web site’s master folder. 


If you haven’t created a master folder for your Web site, you can create a 
folder by clicking the standard Windows Create New Folder icon to the 
right of the Save In drop-down list. 


. Type a name for your page in the File Name text field if the default 


isn’t what you want to name your HTML page. 


The default HTML file extension in the Macromedia Studio suite is . htm, 
but you can also use . html. 


. Select HTML and Images from the Save as Type drop-down list. 


The options below this drop-down list update to reflect your choice. 


. Select Export HTML File from the HTML drop-down list. 


If you select Copy to Clipboard rather than Export HTML File, Fireworks 
exports the code to a temporary location (your computer’s Clipboard), 
from which you can paste the code into an existing document. If you 
select Copy to Clipboard, you can simply open any type of text docu- 
ment and press Ctrl+V to paste the HTML into the file. 


Export HTML File has myriad options available. See the following section, 
“Setting the export HTML file options,” for more information. 


. Select Export Slices from the Slices drop-down list. 


If you haven’t made slices in your PNG file but you have placed guides in 
the file, you can select the Slice Along Guides option, and Fireworks cuts 
up your design based on the guides. 


. Leave the Current Frame Only check box deselected unless you have 


multiple frames in your document, at least one of which you do not 
want to export. 


Leave the Include Areas without Slices option selected unless you 
have a plan to deal with areas you didn’t slice. 


If you’re using a background image, for example, or you want to use 
transparent spacer GIFs, you may not need images from the nonsliced 
areas — if you have any. 


Select the Put Images in Subfolder check box if you want to export 
your images to a folder inside your site’s master folder. 


You need to decide when you export where you want your images to 
live because your HTML document will include links to the images. You 
express the links as pathnames to the images relative to the location of 
the HTML document. 
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Figure 7-2: 
The HTML 
Setup dialog 
box opens 
when 

you click 
Options in 
the Export 
dialog box. 


12. Click the Save button. 


The HTML file is saved to your site’s master folder, and the images are 
saved either to that same folder or to a folder within that folder, as you 
specify in Step 11. 


Setting the export HTML file options 


When you click the Options button in the Export dialog box, the HTML Setup 
dialog box opens, as you can see in Figure 7-2. In the HTML Setup dialog box, 
you can view and modify the default settings that determine the structure of 
the exported HTML document. 





HTML Setup >) 
General | Table | Document Specific 
HTML style: | Dreamweaver HTML {v 


Extension: | htm {v 


Include HTML comments 





Lowercase file name 
Use C55 For Popup Menus 

















OK | Cancel 








You can access settings on the three tabs in the HTML Setup dialog box: 


+ General: Lets you change the default HTML style — different HTML edi- 
tors have different styles of writing and displaying the code — and file 
extension. With Fireworks 8, the different kinds of code include CFML, 
ASP, and more. You can also choose whether or not you want Fireworks 
to put comments in the HTML document. (Comments are notes in the 
HTML source code that typically contain information about the struc- 
ture of the code, such as <!— Left navigation starts here —>. 
The browser doesn’t display comments. If you want to be able to launch 
and edit entire tables from Dreamweaver, be sure you select the Include 
HTML Comments check box.) Select the Lowercase File Name check box 
if you want to make the names of the HTML file and all exported images 
all lowercase, even if you name images with uppercase and lowercase 
letters in your PNG. Select the Use CSS For Popup Menus option if you 
want the pop-up menus in your file to be exported as CSS code rather 
than JavaScript. If you select the Use CSS option, an additional option 
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becomes available. Select the Write CSS to an External File option if you 
want to keep the CSS code in a separate file from the HTML. 


+ Table: Lets you customize the way Fireworks sets up tables. In the default, 
Fireworks puts a one-pixel-high spacer row at the top and a one-pixel-wide 
spacer column on the right to hold the design in place. You can choose to 
have Fireworks nest tables (put one table inside another) instead. You can 
also tell Fireworks to re-create parts of your design that lack objects as 
cells with background-transparent spacer GIFs in the HTML, to leave the 
cell empty, or put in a nonbreaking space. A spacer GIF is a one-pixel-by- 
one-pixel transparent image that you can set to any height and width in 
your HTML to hold open an otherwise empty table cell. 


+ Document Specific: Lets you customize image naming based on table 
structure and/or image function. For example, for slices with multiple 
frames, Fireworks appends _f2,_£3, and so on, to the filename. If the 
images from Frame 2 of your PNG are buttons in their rollover state, you 
may want to have Fireworks append -o or -over to the filename. If you 
want all images to have identical Alt tags, enter the desired word or 
phrase in the Default ALT tag text field (see Book II, Chapter 2 for details 
on ALT tags). If your PNG file contains a Nav Bar Image (see the “Creating 
advanced button rollovers” section, later in this chapter), you can select 
the Export Multiple Nav Bar HTML Files check box if you want Fireworks 
to generate separate HTML files for each button in the navigation bar. 
The Include Areas without Slice Objects check box is selected by default; Book III 
leave it selected to get the most consistent results. Select the UTF-8 Chapter 7 
Encoding check box if you want to use multiple character sets (Hebrew 
and English, for example) in your HTML. 


The Set Defaults button on the Document Specific tab lets you save any new 
settings you make, which you may find particularly useful if you like to use a 
specific naming convention for button rollovers and on states. When you 
adjust the Document Specific settings to your liking and click the Set Defaults 
button, your adjusted settings become the new default Document Specific 
settings. 
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Fireworks writes image maps and JavaScript into the HTML code you export, 
provided that you have hotspots (which Fireworks uses to make image maps) 
or behaviors (which Fireworks uses to make JavaScript) in your PNG. The 
following sections outline how to set up image maps (which let you make 
several distinct hyperlinks from a single image) and complex button behav- 
iors (which make the button image change based on a user action, like rolling 
the mouse over the image or clicking the image). 
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ar 


Fireworks can show slices and hotspots overlapping, but you don’t want 
to overlap them. Fireworks doesn’t export any part of a slice that’s under 
another slice. (The slice on top includes the overlapped area; the slice 
underneath is cut off.) Likewise, whichever hotspot is on top in the Layers 
panel overrides the hotspot underneath. 


Creating image maps with hotspots 


The three hotspot tools let you create hotspots shaped like rectangles, cir- 
cles, or polygons. You can also use the Polygon Slice tool to create a hotspot, 
though as a rule, use the hotspot tools unless you’re making a single, iso- 
lated hotspot. (For more information on the Polygon Slice tool, see Book III, 
Chapter 6.) 


To create a circular or rectangular hotspot using a hotspot tool, just follow 
these steps: 


1. Select a hotspot tool from the Web section of the Tools panel. 


Click and hold on the Rectangle Hotspot tool to access the pop-up menu 
containing the Circle Hotspot tool, if you need to. 


2. Click and drag over the area you want to make a hotspot. 


3. Type a URL in the Link text field in the Property inspector and press 
Enter. 


The URL should be an HTML document name (aboutus .htm, for exam- 
ple) or pathname (/aboutus/staff.htm, for example) for the page 
you want the hotspot to link to. You can add URLs as you make the 
hotspots, or you can create all of your hotspots and then select each 
one and add a URL in the Property inspector. 


4. Make as many more hotspots as you need by repeating Steps 1 
through 3. 


When you create hotspots using the Polygon Slice tool, you’re actually making 
rectangular images with linked areas inside. As a result, Fireworks makes a 
separate image map for each slice. That approach works fine if you’re only 
making one polygonal slice, but if you’re making several adjacent hotspots, 
you may want to use the Polygon Hotspot tool or make your image map in 
Dreamweaver. (See Book III, Chapter 6 for information about how to use the 
Polygon Slice tool, and Book II, Chapter 7 for information on creating Hotspots 
using Dreamweaver.) 


You only have to do a little more to make a polygonal hotspot rather than a 
rectangular or circular hotspot. To make a polygonal hotspot, just follow 
these steps: 
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Click and hold on the Rectangle Hotspot tool to access the pop-up menu 
containing the Polygon Hotspot tool. 


2. Click the canvas to establish the first point of your polygon. 
3. Click a second point. 
Fireworks draws a line connecting the points. 
4. Continue to click until you have drawn the shape that you want. 


You don’t need to click again on the first point to close the shape. You 
may want to avoid making hotspots that have more than six or seven 
points, because the more points that you make, the more code you need 
to reproduce your hotspot as an image map. The polygonal hotspot for 
the bowling pin in Figure 7-3 sacrifices perfect coverage of the pin to 
make a simpler shape, which means less code. 


5. Type a URL in the Link text field in the Property inspector and press 
Enter. 


The URL should be an HTML document name (aboutus .htm, for exam- 
ple) or pathname (/aboutus/staff.htm, for example) for the page 
you want the hotspot to link to. You can add URLs as you make the 
hotspots, or you can create all of your hotspots and then select each 
one and add a URL in the Property inspector. 


6. Click the Polygon hotspot tool and then deselect the last hotspot that 
you made by using the key command Ctrl+D or choosing Select 
Deselect. 


Deselecting ensures that you don’t inadvertently add an extra point to 
your Polygon hotspot. 


When it comes time to export your images, you need to export HTML as well 
as images in order to get the image map that Fireworks makes from your 
hotspots. See the “Exporting HTML with your images” section, earlier in this 
chapter, for more details. 


Dreamweaver has its own tool for creating hotspots and image maps. You can 
also use that tool to edit hotspots and image maps generated by Fireworks. 
See Book II, Chapter 7 for more details. 


Creating advanced button rollovers 


In Book III, Chapter 5, we discuss how to use frames in conjunction with text 
and drawing tools to make the images (one per frame for each button) for 

a simple button rollover. If you plan to use Dreamweaver to generate the 
rollover code, that chapter provides all the information that you need. 


. Select the Polygon Hotspot tool from the Web section of the Tools panel. 
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Figure 7-3: 
The Circle 
Hotspot tool 
covers the 
bowling ball; 
the Polygon 
Hotspot tool 
works best 
for the pin. 














‘Macromedia Fireworks MX 2004 - [hotspot_demo.png g 100%] 
File Edit View Select Modify Text Commands Filters Window Help 








mm IE) my) matte: 


lass: |Q |m] Dither: o% | 


fp Trersparercy y 


sat:|Mone | a 
GARE DE Ea] 
| w Layers "| 


=a 
oaf Sweblaer A) 
| Hotspot | 





















































Frame 1 Hob ü 
~ |) Y Frames and History S 
} 2 Promes Po 
ob | 160446S 100% S SR 7 j 
|2 Frems 2 
[a Diet | camas 17) Ceana seon Image Ize... Fr Canvas © 
|© $ hotspot deno 460 [GIF websnep 126 ~l 

D, a Forever “oo 


= [eee 








If you want to export the rollover code for a two-state button (normal and 
rollover/highlight) from Fireworks, you need to add a behavior to the slice 
by taking these steps: 


1. Right-click the slice for which you want to create rollover code, or 
select the slice and click the behavior handle (the round icon) in the 
center of the selected slice. 


A contextual menu appears. 
2. Choose Add Simple Rollover. 


You can also add rollover behavior to a button by using the Behavior panel: 


1. If the Behavior panel is not currently open, choose Window™Behaviors 
or use the keyboard shortcut Shift+F3. 

2. Click the Add Behavior (+) button at the top left of the Behaviors panel. 
A menu appears. 

3. Choose Simple Rollover from the menu. 


You have set up a behavior that swaps the image in Frame 1 with the image 
in Frame 2 when a user rolls a cursor over the button on your Web page. The 


ar 


Figure 7-4: 
The 
Behaviors 
panel shows 
the actions 
assigned to 
a slice. 
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behavior also swaps the image back when the user moves the cursor off the 
button. 


If you want to check out your rollover in action without building your Web 
page, click the Preview button at the top of the canvas and move your cursor 
over the slice. 


Your button can have up to four states. Fireworks uses the image in Frame 1 
for the normal, default state; Frame 2 for the Rollover state; Frame 3 for the 
Down state; and Frame 4 for the Over While Down state. If you want to 
include a down state for your button, and you have a third frame in your 
PNG with the image for an additional button state, follow the preceding 
steps to add a rollover state, and then do the following: 


1. Click the Add Behavior button at the top left of the Behaviors panel. 
A menu appears. 

2. Choose Set Nav Bar Image from the menu. 
The Set Nav Bar Image dialog box appears. 

3. Click OK. 


Now, when a user clicks the button in your exported HTML, the button 
changes from the rollover state to the down state. 


Figure 7-4 shows what the Behaviors panel looks like after you add the 
Simple Rollover and Set Nav Bar Image behaviors. You can use the add 
behavior (+) button to add a behavior and use the remove behavior (-) 
button to remove a behavior from a slice. 





Events 
onMouseOver 


onMouseOver 


Actions 
Simple Rollover 
Set Nav Bar Image 











If the three-state button is linking to another page, adding a down state 
doesn’t give you much bang for your buck because the linked page may 
appear in the browser window before the user even has a chance to notice 
that the button changed. 
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You may want to include an over-while-down state for your button (sort of 
an extra rollover) if you’re using the down state of the button to indicate the 
current page. If so, check in the Frames panel to make sure you have a fourth 
frame with the image for an extra button state, add the Rollover and Set Nav 
Bar Image behaviors by using the steps that you can find earlier in this sec- 
tion, and then do the following steps: 


1. Double-click the Set Nav Bar Image line in the Behaviors panel. 
The Set Nav Bar Image dialog box appears. 
2. Select the Include Over While Down State (Frame 4) check box. 


If the button is for the current page, select the Show Down Image upon 
Load check box, as well. 


3. Click OK. 


Select the Export Multiple Nav Bar HTML Files check box on the Docu- 
ment Specific tab of the HTML Setup dialog box if you want Fireworks 

to generate separate HTML files for each button in the nav bar (see the 
“Setting the export HTML file options” section, earlier in this chapter, for 
more information). 


Bringing Interactivity to Vour Pages with Behaviors 


Fireworks can generate JavaScript that does more than merely change the 
state of a button. For instance, you can set a behavior that swaps one image 
for another image elsewhere on the page when you roll over a button or 
hotspot. You can also use Fireworks to generate pop-up menus, which you 
can export as either JavaScript or CSS code. 


The Swap Images behavior 


A button rollover is an image swap — you exchange the image for one button 
state with the image for another state. But you can roll over a button and 
have a different image on the page swap. For example, you can set up a roll- 
over behavior for two or more buttons to show different color choices for 

a product, so that when the user rolls over a button for color choices, the 
image of the product changes to show the appropriately colored version. If 
you want the image swap and page download to happen pretty quickly, limit 
the number of images that you want to swap and limit the file size of each 
swapped image. 


To add the Swap Image behavior to a trigger slice and target slice, create 

the frames, images, and slices (see Book III, Chapter 3 to learn how to create 
images, Book III, Chapter 5 for information on frames, and Book III, Chapter 6 
for information on slices), and then follow these steps: 





Figure 7-5: 
The Swap 
Image 
dialog box 
lets you 
choose by 
name or 
position on 
the page. 


<P 
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. Click the slice that you want to use to trigger the image swap. 


You can click the slice either on the canvas or in the Layers panel. 


. Click the Add Behavior (+) button at the top left of the Behaviors panel 


(if the Behaviors panel isn’t visible, press Shift+F3 on your keyboard). 


A menu appears. 


. Choose Swap Image. 


The Swap Image dialog box, which you can see in Figure 7-5, appears. 
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. Select the targeted slice by clicking its name (in the box on the left) or 


by clicking its representation (in the box on the right). 


When you click in either box, both boxes update to show your selection. 


. Using the Frame No. drop-down list, select the frame number that you 


want the rollover to trigger. 
The drop-down list shows all the frames in your PNG file. 


You can also select the Image File radio button and navigate to an exist- 
ing image file outside your PNG to swap in. But for the rollover to work 
correctly in all browsers, the default target image and swapped target 
image have to be the same height and width. 


. Leave the Preload Images and the Restore Image onMouseOut check 


boxes selected. 


Preloading the swapped image ensures the user doesn’t experience a 
delay when he or she rolls over the button that triggers the swap. You 
make a trade-off with preloading because the Web page takes longer to 
load initially. 
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Figure 7-6: 
Aline from 
the behavior 
handle of 
the trigger 
slice 
connects to 
the target 
slice. 


Restoring the image to default prevents the swapped image from “stick- 
ing.” If you want the swapped image to remain in place until the user 
rolls over another button, deselect the Restore Image onMouseOut 
check box. 


7. Click OK. 


A line on the canvas from the center of the trigger slice to the target 
slice shows that one slice triggers a behavior in the other, as you can see 
in Figure 7-6. 
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You can have multiple buttons trigger a rollover in the same slice, and you 
can have a single button trigger rollovers in multiple slices. Of course, the 
more big rollovers you have on the page, the longer the page takes to load. 
On the other hand, rollovers give useful feedback (and instant gratification) 
to the user, and Fireworks makes producing them a snap. 


Generating pop-up menus 


You can cram a lot of navigation into a small space by using a pop-up menu 
because pop-up menus only appear when a user rolls over a button or hot- 
spot. Fireworks lets you specify many of the parameters of a menu’s appear- 
ance. To start with, you can choose whether the links in your pop-up menu are 
made of text or images. In a nutshell, that choice boils down to this: 


+ Linked images: This option makes for a slower download but gives you 
more control over the appearance of the text because the text is 
graphic. 


+ Linked text: This option ensures faster download but gives you less con- 
trol over the appearance of the text because the text is HTML. 


Figure 7-7: 
The Content 
tab of the 
Pop-up 
Menu Editor, 
with a few 
items 
added. 
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You can also customize the position of the menu relative to the slice that 
triggers it, the color of the text and cell background for both normal and 
rollover states, and more. In fact, you have so many options, we can’t cover 
them all here! After you have the basics, though, you can explore all the 
options by using the Fireworks Help files (select the Help menu at the top 
right of the Fireworks menu bar) or just by experimenting. 


To make a basic one-level pop-up menu with linked text, follow these steps: 


1. Select a slice by clicking it on the canvas or in the Layers panel (if you 
need to, open the Layers panel by pressing F2 and/or expand the panel 
by clicking the panel name). 


2. Click the Add Behavior (+) button at the top left of the Behaviors panel 
(if the Behaviors panel isn’t visible, press Shift+F3). 


A pop-up menu appears. 
3. Choose Set Pop-up Menu from the Add Behaviors pop-up menu. 


The Pop-up Menu Editor, which you can see in Figure 7-7, appears, with 
the Content tab active by default. 
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Content | Appearance | Advanced | Position 
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4. Click under the Text column of the Pop-up Menu Editor and type the 
text as you want it to appear in your menu. 


5. Press Tab or click under the Link column of the Pop-up Menu Editor 
and type or select the URL or filename for the page you want your text 
linked to. 


If you have any existing links already on your page, they appear in a 
drop-down list in the Link column. 
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6. 


10. 


11. 


12. 


13. 


14. 


If you want the link to open in a new window or different frameset, 
tab over to or click in the Target column to set the target for the link. 


If you simply want the linked page to open in the user’s current browser 
window, leave this column blank, as Figure 7-7 shows you. For informa- 
tion on other Target options, see the discussion of links in Book II, 
Chapter 2, or the discussion of framesets in Book II, Chapter 6. 


. Repeat Steps 4 through 6 for each item in your menu. 


You can add rows to the list of menu items by clicking the Add Menu 
button (the plus sign at the top left) or by pressing the Tab key until a 
text field appears in the Text column. 


. Click the Next button at the bottom of the Pop-up Menu Editor. 


The Appearance tab becomes active. 


. For the Cells option, make sure the HTML radio button (the default 


selection) is selected. 


If you want to use images rather than HTML text, you need to select the 
Image radio button. Each navigation item is in its own table cell. 


Select Vertical Menu or Horizontal Menu from the drop-down list. 


If you select Vertical Menu, menu items will be stacked vertically in a 
single column. If you select Horizontal Menu, menu items will appear in 
a horizontal row. 


Select the Font face, size, style, and alignment. 


Of course, you don’t need to do this step if you’re using graphics rather 
than HTML text. 


Select the text color and cell background color for the Up (normal) 
state by clicking the Text and Cell color swatches and clicking on the 
color you want with the eyedropper in the color picker that pops up. 


If you don’t want to use the defaults, click the color boxes to open the 
color picker. At the bottom of the dialog box, you can see a preview of 
your menu, as shown in Figure 7-8. 


Select the text color and cell background color for the Over (rollover) 
state by clicking the Text and Cell color swatches and clicking on the 
color you want with the eyedropper in the color picker that pops up. 


If you don’t want to use the defaults, click the color boxes to open the 
color picker. At the bottom of the dialog box, you can see a preview of 
your menu. 


Click the Next button at the bottom of the Pop-up Menu Editor. 


The Advanced tab becomes active. 





Figure 7-8: 
The preview 
shows what 
the menu 
looks like 
after you 
change 
each 
parameter. 
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15. Adjust any of the parameters in the Advanced tab as needed. 


You can preview all these settings at the bottom of the dialog box, 
except Menu Delay: 


e Cell Width and Cell Height: By default, Fireworks sets the cell width 
and cell height automatically, based on the content, but you can 
select Pixels from the drop-down list and type in a custom width 
and/or height. 


¢ Cell Padding and Cell Spacing: Cell padding is the space between 
the edges of the cells and the text within the cells. The default Cell 
Padding setting is 3 pixels. Cell spacing is the space between the edge 
of one cell and the edge of an adjacent cell. The default Cell Spacing 
setting is 0. 


e Text Indent: Text indent is the number of pixels from the left (in a 
vertical menu) or from the top (in a horizontal menu) to the text, not 
including the gaps introduced by cell padding and cell spacing. The 
default Text Indent setting is 0. 


e Menu Delay: Menu delay is the amount of time your menu stays on- 
screen after the user’s mouse rolls off the menu. You adjust it in mil- 
liseconds (ms), or thousandths of a second. The default, 1000 ms, 
equals one second. 


e Pop-up Borders: You can turn on or off the border of your pop-up 
menu (and you can adjust its width if you have the border on), and 
you can customize the colors that make up the border. 
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16. Click the Next button at the bottom of the Pop-up Menu Editor. 
The Position tab becomes active. 
17. Click a Menu Position icon. 


The X and Y coordinates, which represent the top-left corner of the 
menu relative to the slice, update. You can type your own values for the 
X and Y coordinates if you want to customize them. 


18. Click Done. 


The Preview pane that you access at the top of your canvas doesn’t let you 
see the pop-up menu in action. In order to preview your pop-up menu in 
action, you have to choose File™Preview in Browser or use the key com- 
mand F12. You can use any Web browser installed on your computer to pre- 
view your menu, as long as you have JavaScript enabled on that browser. 


Pop-up menus are a tricky business because their appearance can vary in 
different browsers. Be sure to test all your target browsers to make sure that 
they display the menus in a way you find acceptable. 


When you make a slice active that has a pop-up menu behavior attached, 
you see an outline on the canvas in Fireworks where the pop-up menu will 
appear when the user rolls over the slice. 


To edit the pop-up menu, click the behavior handle (the round icon in the 
middle of the slice, visible when you select the slice) and choose Edit Pop-up 
Menu, or double-click the Behavior in the Behaviors panel. 


Chapter 8: Integrating Fireworks 8 
with Other Macromedia Products 


In This Chapter 


YY Making Fireworks work with Macromedia Flash 
Using Fireworks with Dreamweaver 
Working Fireworks with FreeHand 


Directing Fireworks with Director 


UY the release of the original Studio MX suite, Macromedia brought 
Fireworks, Flash, Dreamweaver, ColdFusion, and FreeHand closer 
together. Fireworks MX 2004 added CFML and other server-side languages to 
its Roundtrip HTML capabilities, so Fireworks recognized changes made in 
Dreamweaver (and vice versa) in a wider variety of Web page formats than 
ever. Fireworks 8 continues the tradition of tight integration with the other 
Studio applications. 


The applications in the suite have complementary, and in some cases, even 
overlapping, capabilities. We explore some of those capabilities in the next 
few pages, but start by pointing out one of the key features you find in 
Fireworks: the Quick Export button, which you can see at the upper-right 
corner of the canvas in Figure 8-1. 


When you click the Quick Export button, a menu appears (which you can 
see in Figure 8-2) that offers one-click access to the following options: 


+ Dreamweaver: Export HTML, Update HTML, Copy HTML to Clipboard, 
and Launch Dreamweaver 

Macromedia Flash: Export SWF, Copy, and Launch Macromedia Flash 
FreeHand: Export to FreeHand 10, Copy, and Launch FreeHand 


Director: Source as Layers, Source as Slices, and Launch Director 


+++ + 


Preview in Browser: View in Primary Browser, View in Secondary 
Browser, and Set Primary and Secondary Browser 


+ 


Other: Export to Photoshop, Export to GoLive, Export to FrontPage, and 
Export to Illustrator 
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Figure 8-1: 
In 
Fireworks, 
the Quick 
Export 
button 

is a small 
Fireworks 
icon with 
an arrow at 
the right. 





Figure 8-2: 
The Quick 
Export 
button gives 
you one- 
click access 
to several 
options. 


Quick Export button 
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The Quick Export button may include additional options, depending on what 
exports you may have done previously from your Fireworks PNG file. 


When you export using the Quick Export button, you may use defaults, but 
you also have access to all the regular options available from the Export dialog 
box. See Book III, Chapter 7 for information on advanced export options. 


Integrating Fireworks with Macromedia Flash 


You can open, edit, and export animated GIFs in both Macromedia Flash and 
Fireworks. If you’re creating an animated GIF only as an alternative to an SWF 
(for those rare users who come to your Web page without the Flash plug-in), 
you want to use Macromedia Flash to generate the GIF and SWF (Shockwave 
Flash) animations. Macromedia Flash was built as a powerful animation pro- 
gram, which means that it offers more flexibility, more sophisticated anima- 
tion tools, and more advanced export options for animations than Fireworks. 


Exporting files from Fireworks to Macromedia Flash 


Sometimes you don’t want or need all the sophistication and flexibility that 
Macromedia Flash offers you. You may find Fireworks a more friendly envi- 

ronment for creating or editing simple, silent, noninteractive animations for 
the Web, whether as animated GIFs or SWFs. 


Fireworks can export SWFs, but behaviors don’t export from Fireworks with 
the SWF. Nor do masks, live effects, some text formatting, and numerous 
other features of your PNG. If you want to work with elements of your PNG in 
Macromedia Flash, you don’t need to export it — you can simply import it 
into Macromedia Flash. (See Book IV, Chapter 10 for details on the advan- 
tages of and restrictions on importing Fireworks PNGs.) 


Nevertheless, if you want to export a simple SWF animation from Fireworks, 
you can do it in a snap. Just follow these steps: 


1. Choose File™Save As, or from the Quick Export button, choose 
Macromedia Flash™Export SWF, as you can see in Figure 8-3. 
The Save As dialog box appears. 


2. Change the filename from the default, if you want the exported file to 
be named something more descriptive than Untitled-1.swf. 


3. Select Macromedia SWF from the Save Copy As drop-down list. 


4. Click the Options button if you plan to import the file into Macromedia 
Flash for editing; otherwise, click OK. 
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Figure 8-3: 
You can 
easily take 
the Quick 
Export 
shortcut to 
export a 
multiple- 
frame PNG 
as an SWF. 
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Clicking the Options button opens the Macromedia Flash SWF Options 
dialog box, which gives you control over objects, text, JPEG quality, 
frame rate, and which frames to export: 


e Objects: Select the Maintain Paths radio button if you want to be able 
to edit vector shapes and don’t mind if their appearance shifts a little. 
Select the Maintain Appearance radio button if you want the shapes 
to look identical but you don’t need to edit them within Macromedia 
Flash. 


e Text: Select the Maintain Editability radio button if you want to be 
able to change the text after you import the SWF into Macromedia 
Flash. Select the Convert to Paths radio button if you want the text to 
appear the same in Macromedia Flash and don’t plan to edit it. 


e JPEG Quality: Type a number between 1 and 100, or use the slider 
to select a number, to set the optimization for JPEGs (to activate the 
slider, click the button with the downward-pointing arrow next to 
the JPEG Quality text field). For more information on JPEG quality 
settings, see Book III, Chapter 6. 


e Frames: Select the All radio button if you want all the frames in your 
PNG to be in the exported SWF. If you want only a select series of 
frames to be exported, select the From radio button, and in the text 


NING! 
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fields, type the number of the first and last frame in the PNG that you 
want in the SWF. 


e Frame Rate: Type the number of frames per second at which you 
want your exported SWF to run. 


You can’t import or open SWFs in Fireworks, but you can import or open 
Fireworks PNGs in Macromedia Flash. Read on to find out how. 


Importing files into Macromedia 
Flash from Fireworks 


If you want to design a Macromedia Flash-based Web page, you can do so in 
Fireworks, but you need to import the PNG into Macromedia Flash and 
create the interactivity in Macromedia Flash. 


Macromedia Flash can import PNG files, either as flattened files (with or with- 
out alpha transparencies, which are transparent or semitransparent areas) or 
as sets of editable Library items. Macromedia Flash can’t import slice informa- 
tion, Live Effects, or behaviors, but it can preserve different button states on 
their respective separate frames. For more information on what Macromedia 
Flash can and can’t import in a PNG, see Book IV, Chapter 10. 


And of course, Macromedia Flash can import JPEGs and regular GIFs, so you 
can export those formats from Fireworks for easy import into Macromedia 
Flash. 


Macromedia Flash can’t dynamically load progressive JPEGs, so if you want 
to link to a JPEG from an SWF file without embedding the graphic in the 
Flash movie, make sure you don’t export the graphic from Fireworks as a 
progressive JPEG. See Book III, Chapter 6 for information on progressive 
JPEGs. 


You can move vector objects between Fireworks and Flash; attributes like 

fill, filter and blend, gradient, and stroke settings are preserved. To move a 
vector object from Fireworks to Flash, choose Quick Export™Macromedia 

FlashCopy. Then paste the object on the Stage in Flash. 


Macromedia Flash can import SWFs that you create in and export from 
Fireworks, but keep in mind that you can’t use many benefits of SWFs in SWFs 
exported from Fireworks. (See the section “Exporting files from Fireworks to 
Macromedia Flash,” earlier in this chapter.) If you want interactivity in your 
SWF, you probably want to design objects in Fireworks (or FreeHand) and 
then import the Fireworks PNG (or FreeHand FH11 file) into Macromedia 
Flash. Of course, you also have the option to author the movie by using only 
Macromedia Flash. 
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Integrating Fireworks with Dreamweaver 
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Fireworks is a Web design tool, and Dreamweaver is an HTML editor (XML 
editor, ColdFusion editor, and so on). The two programs have overlapping 
capabilities, and they have complementary capabilities. Not only that, they’re 
designed to work together to make Web page creation and modification a 
breeze. 


Basically, if you generate your HTML in Fireworks and edit the code in 
Dreamweaver, Fireworks recognizes the changes you make in the other 
application. That recognition goes for links, image maps, behaviors shared 
by both programs, and HTML text. Macromedia coined the term Roundtrip 
HTML to describe the way the two programs work together. 


Setting preferences 


You need to establish a few settings, both in Dreamweaver and in Fireworks, 
to work with Roundtrip HTML. In Dreamweaver, you need to define a local 
site (see Book II, Chapter 3) and make Fireworks your primary image-editing 
application (see Book II, Chapter 7). 


In Fireworks, you need to set a few preferences. Just follow these steps: 


1. Choose Edit™Preferences or use the key command Ctrl+U. 
The Preferences dialog box appears. 
2. Click the Launch and Edit tab to make it active. 


You use the two drop-down lists for specifying the treatment of Fireworks 
source files: When Editing from External Application and When Optimizing 
from External Application. 


3. Select one of the three options from the When Editing from External 
Application drop-down list: 


e Always Use Source PNG: When you launch Fireworks from within 
another application, the original PNG source file for the Web page or 
table opens in Fireworks. 


e Never Use Source PNG: When you launch Fireworks from within 
another application, the exported GIF or JPEG you select opens in 
Fireworks. 


JPEG is a lossy format, so if possible, you want to edit the image from 
the original source file. For more information about lossy compres- 
sion, see Book III, Chapter 6. 


e Ask When Launching: Every time you launch Fireworks from within 
another application, the computer prompts you to specify whether 
you want to edit the PNG source file or the exported optimized image. 


Figure 8-4: 
The 
Fireworks 
Edit button 
in the 
Dream- 
weaver 
Image 
Property 
inspector. 
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4. Select one of the three options from the When Optimizing from 
External Application drop-down list. 


You have the same options as those in the When Editing from External 
Application drop-down list. 


5. Click OK. 


Editing PNGs 


When you’re editing your Web page in Dreamweaver, the page may not work 
quite the way you want it to. You may add text to one cell in a table and find 
that your change creates a misalignment of an image in the adjacent cell. 
Maybe you need to slice an image differently. In cases like these, you want to 
edit your PNG source file, instead of making massive changes in Dreamweaver 
that can make your PNG source file out of sync with the Web page it repre- 
sents. Luckily, you can launch and edit your Fireworks PNG source file from 
within Dreamweaver by following these steps: 


1. Click the optimized image in the Dreamweaver document window. 
The Property inspector updates to display image parameters. 


2. Click the Fireworks Edit button in the Property inspector, as you can 
see in Figure 8-4, or right-click the optimized image and choose Edit 
with Fireworks from the contextual menu that appears. 


If Dreamweaver can’t locate the PNG automatically, the Find Source dialog 
box appears. Click Yes because you want to locate the PNG source file 
for the image you selected for editing. Navigate to the source file in the 
Open dialog box and either double-click the PNG file’s icon or click the 
file’s icon and click Open. The source PNG file opens in Fireworks. At the 
top of the canvas, the words “Editing from Dreamweaver” show that 
Roundtrip HTML is in effect. 
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3. Edit the image and/or slice as needed. 
4. Adjust any Optimization settings, if you need to. 
See Book III, Chapter 6 for information about optimizing images. 


The new version of the image exports at the new settings that you spec- 
ify or at the previous settings if you decide not to change them. 


5. Click the Done button at the top left of the canvas. 


The Fireworks window closes, and you can see the new image in the 
Document window in Dreamweaver. 


If you don’t need to change anything about the image but its optimization 
settings, you can select the images and click the Optimize in Fireworks Edit 
button in Dreamweaver’s Property inspector. A special Optimize Images 
dialog box appears, where you can edit optimization settings. Just click the 
Update button after you make the adjustments. 


Working with tables 


When you export HTML from Fireworks, you export code that tells a browser 
where each slice goes by establishing a table with cells arranged in rows and 
columns to correspond with your slices. If you want to take advantage of 
Roundtrip HTML for editing tables, make sure your Export settings include 
Dreamweaver HTML as the HTML Style and that you set the option to include 
HTML comments (see Book III, Chapter 7 for details on setting the export 
HTML file options). If you want to make major changes to the table structure 
after you start editing the HTML in Dreamweaver, whether or not you need 
to re-slice images, you want to launch from Dreamweaver and edit the table 
in your Fireworks PNG source file: 


1. Select the table in Dreamweaver. 
The Property inspector updates to display the parameters of the table. 
2. Click the Fireworks Edit button in the Property inspector. 


If you need to, you can navigate to the source PNG file from within the 
Dreamweaver Property inspector by clicking the File icon next to the 
Edit button. The source file opens in Fireworks. 


3. Make edits to the slices, guides, and images as needed. 
You can even edit the HTML in text slices, if you want. 


4. Click the Done button (to the left of the Editing from Dreamweaver 
icon at the top of the canvas) when you finish editing. 


The Fireworks window closes, and Dreamweaver updates the table and 
images. 
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ae If you make substantial changes to table structures in Dreamweaver, 
Fireworks may not recognize the code. In that case, when you launch and 
edit the table in Fireworks, Fireworks overwrites the changes that you made 
in Dreamweaver. A prompt notifies you if Fireworks will overwrite the exist- 
ing Dreamweaver edits, so you can cancel if you don’t want that to happen. 


What if you accidentally delete the PNG source file, or you don’t have a copy 
of it in the first place? The Fireworks Reconstitute Table feature can save the 
day. Fireworks can make an existing HTML table with image slices into an 
editable PNG — as long as no tables are nested in the table that you want to 
reconstitute — and can even import behaviors and pop-up menus that you 
create in Fireworks or Dreamweaver. If you have multiple, non-nested tables 
on the page (tables stacked one on top of the other, for example), Fireworks 
opens a PNG for each table. 

MBER 

S Fireworks is an image editor. It can reconstitute tables, but you’ll need to use 

an HTML editor like Dreamweaver to edit the underlying HTML source code. 


To create new PNGs in Fireworks from an HTML file with multiple, non- 
nested tables, follow these steps: 


1. Choose File™Reconstitute Table. 


The Open dialog box appears. Book III 
2. Navigate to the HTML file and double-click to open it, or select the file Chapter 8 
and then click Open. = 
as Sy 

Each non-nested table in the HTML opens in its own window, with slices 3 ès 

named and in place, and rollover behaviors attached. 7 z = & 

FF 

To create a new PNG from the first table in an HTML file that has multiple Pi IE = 

tables, follow these steps: = 2“ 
o 


1. Choose File®>Open. 
The Open dialog box appears. 


2. Navigate to the HTML file and double-click to open it, or select the file 
and then click Open. 


The first table in the file opens in Fireworks, with slices named and in 
place, and rollover behaviors attached. 


To add the first table in an HTML file with multiple tables to an existing PNG, 
follow these steps: 


1. Choose File™Import. 
The Open dialog box appears. 
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2. Navigate to the HTML file and double-click it, or select the file and 
click Open. 


The insert pointer appears when you place the cursor over the canvas. 


3. Place the pointer at the top-left corner of where you want the imported 
table to go and click. 


The table — slices, images, JavaScript, and all — appears. Objects are 
spread in layers based on table structure. 


You can also import XHTML, CFML, UTF-8 encoded files, and more. (See 
“Using Fireworks PDF” on your Macromedia Studio installation CD for details 
on importing non-HTML files.) After you export the reconstituted table from 
Fireworks, you can take advantage of Roundtrip HTML from that point on. 


Integrating Fireworks with FreeHand 


FreeHand is a vector graphics application, so it shares many capabilities 
with Fireworks. The main difference between the programs is that you can 
best use FreeHand to create images primarily for print design (because it 
has more extensive drawing capabilities), and you put Fireworks to best use 
primarily for Web page design. 


Print and Web design jobs use different color modes: 


+ CMYK: Offset printing, the four-color process used to create most 
mass-produced printed materials, utilizes the color mode CMYK (Cyan, 
Magenta, Yellow, and black). 


+ RGB: Though you may see some Web graphics made using grayscale or 
other modes, by and large, graphic production for the Web uses the RGB 
(Red, Green, Blue) mode because computer monitors use the RGB mode. 


Changing an image from one mode to another requires a conversion process. 
If you design a page in Fireworks but want to repurpose the design for a 
print piece, you need to import it into FreeHand to perform the conversion 
from RGB to CMYK. Some colors may shift slightly because the two modes 
don’t share all colors. For more information on the RGB and CMYK color 
modes, see Book VI, Chapter 6. 


Despite the differences in color mode for print and Web design jobs, you 
can move a document between FreeHand and Fireworks pretty seamlessly. 
You can open FreeHand files (. £h11) in Fireworks and Fireworks PNGs in 
FreeHand. You may not get some features of Fireworks PNGs in FreeHand, 
and you may miss out on some FreeHand options when you open an FH11 
document in Fireworks, including Live Effects and slices. (See the Fireworks 





Figure 8-5: 
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Help files, which you can access from the Help menu at the top right of the 
Fireworks menu bar, for a complete list.) Nevertheless, Fireworks 8 offers 
increased compatibility with FreeHand when it comes to preserving vector 
attributes like effects, fills, and strokes as you move objects between the two 
applications. 


Importing FreeHand files into Fireworks 


To import a FreeHand file (any from version 7 or later) into Fireworks, follow 
these steps: 


1. Open a New file in Fireworks by choosing File®>New or using the key 
command Ctrl+N. 


For more information on opening a new file in Fireworks, see Book III, 
Chapter 2. If you don’t set the canvas size as big as or bigger than the 
FreeHand document, some objects may appear cut off in Fireworks (fear 
not, though — the objects are there in full, they just don’t fit on the 
canvas). You can increase the size of the canvas after importing the file 
to see any objects that might have appeared cut off or not visible when 
you did the original import. 


2. Choose FileImport or use the key command Ctrl+R. 
The Import dialog box appears. 


3. Navigate to the FreeHand file and double-click it, or select it and then 
click the Import button. 


The Vector File Options dialog box, which you can see in Figure 8-5, 
appears. 
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4. Adjust any settings that you want to change from the file-specific 
defaults: 


Scale: Scale sets the scale of the imported file, using a percentage. If 
you change the scale, the width and height change automatically to 
reflect the scaling percentage. Bitmap objects aren’t affected by this 
setting. You can scale (or re-scale) vector objects after you have 
them on the canvas. 


Width and Height: You can set the width and height of the imported 
file by typing numbers in the text fields and selecting pixels, inches, 
or centimeters from the drop-down lists. 


Resolution: Standard screen resolution is 72 dpi (pixels/inch). If the 
file that you’re importing is at another resolution, you may want to 
import it at the standard screen resolution because files at print res- 
olution tend to be bigger and slower, and the final resolution of your 
Web images will be 72 dpi. 


Paths and Text: Select the check boxes for Paths and Text if you 
want them to be anti-aliased (for smoothed edges) on import, and 
select Crisp, Strong, or Smooth from the drop-down list to control 
the anti-aliasing. You can change these settings later from the 
Property inspector. 


You can use the File Conversion settings to control how Fireworks 
imports multipage documents. 


Include Invisible Layers: By default, layers that are turned off in 
FreeHand don’t get imported to Fireworks. Select the Include 
Invisible Layers check box if you want to import objects on layers 
that are turned off. 


Include Background Layers: Select the Include Background Layers 
check box if you want to import the objects on the background 
layer(s) of the FreeHand file into Fireworks. 


The Render as Images settings let you convert complicated shapes 
and fills to bitmaps. 


5. Click OK. 


The Vector File Options dialog box closes, and the pointer changes to 
the right-angled Insert cursor when you place it over the canvas. 


6. Put the cursor where you want the top-left corner of the imported file 


to go and click. 


The imported file’s objects are placed in the current frame of the 
Fireworks document. 


If you don’t want to import the whole FreeHand file, you can try this option: 
If you have enough room on your monitor to have Fireworks and FreeHand 


WING, 
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open side by side, you can drag and drop shapes and bitmaps from one 
application to the other. 


When you drag a vector shape with a FreeHand pattern fill into Fireworks, 
you lose the pattern fill if it’s not available in Fireworks. 


Editing Fireworks objects in FreeHand 
You can copy bitmaps, text, and vector art from Fireworks into FreeHand 
easily. Just follow these steps: 


1. 


a 


In Fireworks, select the bitmap, text, or vector object and copy it by 
pressing Ctrl+C or by choosing Edit™Copy. 


. Open FreeHand, if it’s not already open, and open a new document 


by pressing Ctrl+N or choosing File>New, if you don’t already have a 
document open. 


. Select Edit>Paste, or use the key command Ctrl+V. 


The Fireworks PNG Import Settings dialog box appears. 


. Select a file conversion method from the File Conversion drop-down 


list, unless you want to import the Fireworks document as a single flat- 
tened bitmap, in which case you can skip to Step 7. 


Your options for file conversion are 


e Open frames as pages: Converts frames in the Fireworks document 
into pages in the FreeHand document. If you select this option, select 
the Remember Layers check box if you want the layers from the 
Fireworks document to be preserved as individual layers for each 
page in the FreeHand document. 


e Open frames as layers: Converts frames in the Fireworks document 
into layers in the FreeHand document. 


From the Frame drop-down list, select which individual frame from 
the Fireworks document that you want to copy to FreeHand, or select 
All to import all frames. 


. For objects and for text, select the radio button for one of the follow- 


ing two options: 


e Rasterize If Necessary to Maintain Appearance: When you select 
this option, certain properties (gradients, drop-shadows, and the 
like) lose their editability, but the object maintains its appearance. 
Rasterization is the process of converting vectors to bitmaps. 


¢ Keep All (Paths or Text) Editable: When you select this option, cer- 
tain properties of the vector shape or text may shift in appearance, 
but text or vector properties of the object remain editable within 
FreeHand. 
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7. Select the Import as a Single Flattened Bitmap check box if you want 
to import the object as you see it on your canvas in Fireworks. 


If you’re pasting in text or a vector object, you can no longer edit the 
object as text or a vector object because it becomes a bitmap. If you 
select this check box, the rest of the options in the Fireworks PNG 

Import Settings dialog box become irrelevant, so they’re grayed out. 


8. Click OK. 


The dialog box closes and the bitmap or vector object that you copied 
from Fireworks is added to the FreeHand document. 


Integrating Fireworks with Director 


The MX version of Director (Macromedia’s flagship multimedia authoring 
application) wasn’t released at the time that the original Macromedia Studio 
suite came out, but it has become available since. Fireworks and Director can 
work together nicely if, for example, you want to edit a Director bitmap cast 
member using the capabilities of Fireworks (in Director, objects like bitmaps, 
shapes, and text are referred to as cast members). Macromedia’s Web site 
gives you access to a Fireworks Import Xtra, which you need to download and 
install if you’re working with Director Shockwave Studio version 8.0 or earlier. 


You can use Fireworks to create GIFs, JPEGs, 32-bit PNGs (with or without 
transparencies), and HTML (with interactive and/or animated content), all of 
which you can import into Director. 


The Quick Export button gives you easy access to two Director export modes: 


+ Source as Layers: This mode exports each layer. You can use this mode 
for layered PNG files or animations. 


+ Source as Slices: This mode exports slices and behaviors in the form of 
optimized images and HTML with JavaScript. You can use this mode for 
rollover buttons or other interactive content. 


Whichever option you select, the Export dialog box opens. The Trim Images 
check box in the Export dialog box is selected by default when you export to 
Director. The Trim Images option crops each layer or frame to remove space 
outside the objects in each layer or frame. In other words, if your canvas is 
800 x 600 pixels, and you have an animation that uses only 25 percent of the 
canvas, selecting the Trim Images check box causes Fireworks to crop the 
extra 75 percent out of each layer it exports. 


You can also launch Fireworks from within Director to edit and optimize cast 
members. To do so, you first want to set Fireworks as your external image- 
editor by choosing File™Preferences™Editors from within Director and 
selecting Fireworks for bitmap graphics. 


Book IV 
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Chapter 1: Introduction to 
Macromedia Flash 8 


In This Chapter 


Getting to know Macromedia Flash and vector graphics 
Investigating basic moviemaking principles 

Creating a Flash document file 

Exploring the Macromedia Flash interface 

Viewing movies and setting preferences in Macromedia Flash 
Getting help 


Í you're creating a Web site, you don’t really need Macromedia Flash. So, 
when and why do you use Macromedia Flash? You use Macromedia Flash 
when you want your Web site to make greater use of animation, sound, and 
interactive graphics. You can pick from two different flavors of Macromedia 
Flash 8 — Standard Macromedia Flash 8 and Macromedia Flash Professional 
8. This book looks at only Macromedia Flash Professional, but we give you 

just an introduction to the product by covering Flash’s basic capabilities. 


Understanding What Macromedia Flash Is 
and How It Works 


If someone asks you what Macromedia Flash is, you can quickly say, “It’s a 
Web animation program.” But that statement, while true, doesn’t do justice 
to Macromedia Flash’s wide-ranging capabilities. 


Seeing what Macromedia Flash can do 

Macromedia Flash is a rich program. It’s fully programmable and uses its 
own language, called ActionScript. Only your creativity limits what you can 
do with Macromedia Flash. The following list points out Macromedia Flash’s 
major features and may help you decide if you want to use Macromedia 
Flash on your Web site: 
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+ Animate text and graphics, including changing their color and visibility. 


+ Create your own graphics or import graphics from another program, 
such as FreeHand MX or Fireworks 8. 


+ Design Web buttons, still or animated, that link users to other pages or 
sites or perform other programmed actions. 


+ Add sound and video to your Web site. 


+ Add interactivity to your site by letting viewers choose where they go 
and what they see or hear. You can also create forms for viewers to fill 
out, poll viewers’ interests, and customize a site for each viewer. 


+ Create a user interface, including scroll bars, check boxes, list boxes, 
forms, and more. 


You can design an entire Web site using Macromedia Flash. For example, you 
can use Flash buttons to create your menu and place the content of your 
Web site on the Timeline. (The Timeline is the collection of frames and 
layers that make up a Flash movie and is covered in more detail in Book IV, 
Chapter 5.) Macromedia Flash gives you complete artistic freedom when 
designing your site, as compared to designing in HTML, which you may find 
limiting. For example, HTML significantly limits your placement of objects. 
On the other hand, when using Macromedia Flash, you need to be careful 
that the site displays quickly and that users can easily navigate it. Also, 
updating your content and connecting to a database to retrieve content is 
more complex and time-consuming with Macromedia Flash. 


Creating content for a Web site in Macromedia Flash 


Using Macromedia Flash has two components. First, you create the Flash 
document and publish it to a format that a browser can read. Then, you (or 
others) view the Flash content in a browser. To create Flash content, follow 
these basic steps: 


1. Create your Flash animation in Macromedia Flash and save it as a 
Flash document. 


This document has an . fla extension, and you often hear it called an 
FLA file. (Chapters 2 through 6 and Chapters 8 and 9 in Book IV explain 
the features that Macromedia Flash offers for creating Flash documents.) 


2. Use the Publish command in Macromedia Flash to save your FLA file 
as a Flash movie. 


The Flash movie has an . swf extension, and you often hear it called an 
SWF file. When you publish the movie, Macromedia Flash also generates 
the HTML code that you need to insert the SWF file into your Web page. 
See Book IV, Chapter 7 for detailed instructions on how to add Flash 
movies to your Web page. 
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3. Insert the HTML code into your Web page (or create a new Web page 
and add the HTML code). 


The HTML code refers to the SWF file. 


After taking these three steps, you simply follow the procedures that you use 
for any Web site — uploading the HTML and SWF files. 


Using Macromedia Flash on a Web site 

To view a Flash movie, you need the Macromedia Flash Player. Macromedia 
Flash Player 6 is the latest player as of this writing. After you have the 
Macromedia Flash Player installed, your browser automatically uses the 
player to display the Flash animation. You can download the Macromedia 
Flash Player for free from the following Web site: 


www.macromedia.com/flashplayer/ 


Although the vast majority of people who access your Web site have the 
Macromedia Flash Player on their computers already, you may want to 
include a button or link on your Web site that connects to this Macromedia 
URL so that people can easily find and download the player if they need it. 


Comparing Bitmaps and Vector Graphics 


Most graphics that you see on a Web site are bitmap files that are reduced in 
file size so that they can be displayed as .gif files. A bitmap is a graphic 
image that’s made up of many tiny dots (bits) that are very close together. 
The various colored dots create the pattern that your eyes see as a picture. 
When the dots are displayed on a computer screen, they’re called pixels. To 
get a bitmap graphic into Macromedia Flash, you import it. See Book IV, 
Chapter 3 for more details about importing graphics. 


Bitmap graphics can create very large file sizes (although compression can 
make the files smaller). Large file sizes mean that your Web page takes 
longer to display in a Web browser. Also, bitmaps don’t scale very well, and 
they’re difficult to transform. If you need to enlarge a bitmap, you start to 
see the individual dots, which gives you a grainy graphic image. 


Macromedia Flash creates vector graphics. Unlike bitmaps, vector graphics 
are defined by equations that specify location, direction, and color. The 
equations result in small file sizes, and that small size provides a faster dis- 
play on your Web site. And you can easily scale vector graphics. No matter 
how large or small you make your graphic, it always looks clear. And finally, 
with vector graphics, you can easily transform an image like a circle into 
another image, like a triangle. 
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You can’t create all graphics by using vectors. Photographs and other com- 
plex designs usually need bitmaps to display them in all their glory. Often, 
you use a combination of bitmap and vector graphics to complete your Web 
site. 


Exploring Basic Moviemaking Principles 


Macromedia Flash uses a classic moviemaking structure, which contains the 
following components: 


+ The Stage: The Stage contains all your content, which includes graphics 
and text. 


+ Frames: A frame represents a small unit of time, such as f %2 ofa 
second. Each frame contains a tiny section of the animation. 


+ The Timeline: The Timeline contains all the frames. You use the Timeline 
to manipulate your content over time and thus create the animation. 


+ Layers: Layers are collections of linear frames that are all on the same 
level. Layers can be moved up or down to change the position of objects 
on the Stage relative to each other. 


+ Scene: Scenes are discreet collections of layers, and are a great tool to 
help you organize your movie. 


The Stage 


The Stage, shown in Figure 1-1, is a simple rectangle on which you place all 
your content. You change the content on the Stage from frame to frame to 
create animation. You generally use the drawing and editing tools in the Tools 
panel to draw and edit the content on the Stage. In this respect, Macromedia 
Flash is a graphic program like many others. You can create text, circles, 
lines, and so on, and you can specify the color of the objects that you create. 
You can save the graphics in standard Web site bitmap formats — JPEG, GIF, 
and PNG. 


In the section “Setting document properties,” later in this chapter, we explain 
how to specify the size and color of the Stage. 





Figure 1-1: 
The main 
screen 
contains 
everything 
that you 
need to 
create great 
animations. 
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The Timeline and frames 


You can think of the Timeline (refer to Figure 1-1) as the frames in a film reel. 
The difference is that Macromedia Flash’s Timeline is electronic, rather than 
on film. Each frame covers a specific period of time. The default frame rate is 
12 frames per second (fps), which means that each frame covers f %2 of a 
second. You use the frames in the Timeline to control the flow of the anima- 
tion. You click a frame to make it current. By specifying which frames con- 
tain animation, you determine when animation starts and stops. Book IV, 
Chapter 5 explains more about working with the frames in the Timeline. 


Layers 


In Figure 1-1, you can see the Layer list, which includes the default Layer 1, 
to the left of the Timeline. Layers are covered in Book IV, Chapter 4, but for 
now you should understand that you can separate the content on the Stage 
into layers. Layers help organize your content so that your graphics and ani- 
mations don’t “bump” into each other. You should also use separate layers 
for ActionScript and sounds. 
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Scenes 


A scene is simply a way to organize the Timeline. You can use the default 
Scene 1 (refer to Figure 1-1) and have just one scene for your entire movie. 
However, when your animations become more complex, adding scenes can 
help you keep track of your movie structure. You can find out more about 
scenes in Book IV, Chapter 5. 


Creating a Flash Document File 


When you want to create a Flash document, you first have to start Macromedia 
Flash 8. In most cases, you have a shortcut on your desktop. Double-click it to 
start Macromedia Flash. If you don’t have a shortcut, choose Start™Programs™ 
Macromedia™Macromedia Flash 8. 


To open an existing movie, choose File~Open, locate the FLA file, and 
double-click it. You often start creating your movie by creating or importing 
graphics. 


To save a Flash document as an FLA file for the first time, choose File™Save. 
Choose a location on your hard drive or network, type a name, and click the 
Save button. After the first save, just choose File™Save to save your latest 
changes. 


Taking a Quick Tour of the Macromedia Flash Interface 


The Macromedia Flash interface exists to help you create animation. Although 
the interface has several components, and you have a lot of options for cus- 
tomizing those components, don’t be intimidated! You can soon find it easy to 
use. Refer to Figure 1-1 to see one way of viewing the interface. 


Menus 


Most of the commands that you use in Macromedia Flash appear on the 
menus. Macromedia Flash doesn’t make extensive use of the toolbars that 
other programs use so much. The following list gives you a summary of the 
menu items and their main features: 


+ File: Open, close, and save files; import and export files; print a Flash 
document; publish documents (to create SWF movie files); and close 
Macromedia Flash 


+ Edit: Undo and redo actions; cut, copy, and paste; delete, duplicate, and 
select objects on the Stage; copy and paste frames from the Timelines; 
edit symbols (which you can read about in Book IV, Chapter 3); set pref- 
erences; and create keyboard shortcuts 
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View: Zoom in and out, change how Macromedia Flash displays objects 
and text, choose which parts of the screen you want to display, and snap 
objects to pixels on the Stage or other objects 


Insert: Insert symbols, insert and delete frames on the Timeline, insert 
layers, and create animation (see Book IV, Chapter 5, to find out how to 
create animation) 


Modify: Edit layers, scenes, the Stage, symbols, frames, and graphic 
objects on the Stage 


Text: Format text 


Command: Create automated tasks that you can use repeatedly on a 
variety of objects 


Control: Play and rewind animation, test movies and scenes, activate 
some interactive features, and mute sounds 


Window: Display panels and toolbars 


Help: Get help on Macromedia Flash and ActionScript 


Most of the menu commands are discussed in detail in the rest of this book. 


Table 1-1 lists some of the commonly used keyboard shortcuts for the menu 
commands. After you get used to them, you may find using them easier (and 
faster) than using the menu. In the section “Creating your own keyboard short- 
cuts,” later in this chapter, we explain how you can make keyboard shortcuts 
for your particular needs. 


You may want to photocopy Table 1-1 and post it near your computer. 






































Table 1-1 Handy Keyboard Shortcuts 
Menu Command Keyboard Shortcut 
File>New Ctrl+N 

Files>Open Ctrl+0 

File>Save Ctrl+S 

File>Import Ctrl+R 

Edit>Undo Ctrl+Z 

Edit>Redo Ctrl+Y 

Edit->Cut Ctrl+X 

Edit>Copy Ctrl+C 

Edit>Paste Ctrl+V 

Edit->Paste in Place Ctrl+Shift+V 





(continued) 
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Table 1-1 (continued) 
























































Menu Command Keyboard Shortcut 
Edit®Copy Frames Ctrl+Alt+C 
Edit->Paste Frames Ctrl+Alt+V 
Views>Hide Panels F4 
Inserte>Convert to Symbol F8 
Insert=>New Symbol Ctrl+F8 
Insert>Frame F5 
Insert>Keyframe F6 
Modify*>Group Ctrl+G 
Modify*>Break Apart Ctrl+B 
Control®Play Enter 
Control®Rewind Ctrl+Alt+R 
Control>Test Movie Ctrl+Enter 
Window>Align Ctrl+K 
Window™>Color Swatches Ctrl+F9 
Window=>Actions F9 
Window=>Library Ctrl+L or F11 
Timeline 


The Timeline doesn’t tell you what is happening; it tells you when something 
is happening. But the Timeline does give you clues about the content of your 
animation. Figure 1-2 shows a Timeline with plenty of action. (Book IV, 
Chapter 5 tells you all about using the Timeline to create animation.) 


If the Timeline isn’t displayed, choose ViewTimeline. Each layer has its 
own Timeline so that you can see the sequence of events separately for each 
layer. (See Book IV, Chapter 4 for more information about the Timeline, 
layers, and the Layer list.) The Timeline has the following features (see 


Figure 1-2): 


+ Layer list: The Layer list helps you organize your content. For example, 
Figure 1-2 shows separate layers for different objects, sounds, and 
actions (ActionScript programming). 


+ Insert a layer: Use the New Layer button to add a new layer. 


+ 


Delete a layer: Use the Delete Layer button to delete a layer. 


+ Playhead: The playhead indicates the current frame. 





Figure 1-2: 
A busy 
Timeline. 
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+ Current frame: The Current Frame box also displays the current frame. 


+ Frame rate: The Frame Rate box displays the current frame rate, which 
is the number of frames that play per second in an animation. 


+ Elapsed seconds: The Elapsed Seconds box displays the number of sec- 
onds that have passed from the beginning of the movie to the current 
frame, at the current frame rate. 


+ Action: A small a in a frame indicates that the frame contains 
ActionScript to control the animation. 


+ Keyframe with no content: A keyframe is a frame that contains a change 
in the animation. If you insert a keyframe but don’t put anything in that 
keyframe, the Timeline displays an unfilled circle. 


+ Keyframe with content: When a keyframe contains any object, the 
Timeline displays a filled circle. 


+ Sound: When you insert sound into an animation, the sound’s wave 
appears on the Timeline. 


+ Motion tween: A motion tween is motion animation that Macromedia 
Flash calculates automatically from the first and last keyframes. The 
Timeline shows motion tweens in light blue. 


+ Shape tween: A shape tween is shape (morphing) animation that 
Macromedia Flash calculates automatically. The Timeline shows shape 
tweens in light green. 


Layer list Keyframe with no content 

















Playhead Sound 
a iii 

ago E| LAY 2» x 3 E 50 Ci 
L tayer 30 mk h ad 
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Delete layer Keyframe with content 
New layer Currentframe | Elapsed seconds 


Frame rate 
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Figure 1-3: 
Use the 
Tools panel 
to create 
graphics, 
view your 
drawing, 
and specify 
colors. 


The Tools panel 


The Tools panel includes all the tools that you need to create and edit graph- 
ics. The Tools panel contains the following sections: 

+ Tools: Select, draw, and edit graphic objects and text 

+ View: Pan and zoom 

+ Colors: Specify the color of lines and fills 

+ Options: Specify options for the buttons in the Tools section 
Figure 1-3 shows the Tools panel in detail, and you can also see the options 


for the Brush tool. See Book IV, Chapter 2 for further explanation about the 
Tools panel. 


Arrow tool Subselection tool 








Line tool = Lasso tool 
Pen tool | ji m Text tool 
Oval tool ahi Rectangle tool 
Pencil tool -E -- Brush tool 











Free Transform tool 
Ink Bottle tool | 
Eyedropper tool ~” 4 


Hand tool — OQ 


Fill Transform tool 
- Paint Bucket tool 
Eraser tool 














Zoom tool 


Stoke color 
Fill color 


Black and white = -— Swap colors 





All the tools in the Tools panel have keyboard shortcuts. You can conve- 
niently pick a tool, using your left hand on the keyboard while you keep your 
right hand on the mouse (or vice versa if you’re left-handed). Table 1-2 lists 
keyboard shortcuts for many of the tools in the Tools panel. 














Table 1-2 Keyboard Shortcuts for Tools Panel Tools 
Tool Shorteut Tool Shorteut 
Arrow V Brush B 
Subselection A Free Transform Q 





Line N Fill Transform F 





Getting Organized with Panels 357 























Tool Shortcut Tool Shortcut 
Lasso L Ink Bottle S 

Pen P Paint Bucket K 

Text T Eyedropper | 

Oval 0 Eraser E 
Rectangle R Hand (Pan) H 

Pencil Y Zoom M,Z 





Getting Organized with Panels 


You use panels to specify settings (such as colors) or to view information 
about objects. You can access the panels from the Window menu, and panels 
also have their own Options menus. Click the menu icon in the upper-right 
corner of a panel to display its Options menu. 


You can organize the Macromedia Flash screen for your convenience. For 
certain tasks, you may want one group of panels open; for other tasks, you 
may want a different group available, or none at all. Follow these guidelines 
when working with panels: 


+ Save panel layouts: If you like to work with certain panels open most of 
the time, you can save panel configurations. Just display the panels that 
you want and choose Window™Workspace Layout™Save Current. Type a 
name for the layout and click OK. The next time that you want to see 
that layout, choose Window™Workspace Layout™ YourLayoutName (you 
can choose a layout name that makes sense to you). 


+ Dock: You can dock the panels at the edge of the screen so that they 
don’t cover up the Stage. To dock a panel, drag it by its grabber (the five 
dots next to the name of the panel) to the right or bottom of the screen 
until it displays a rectangular border. (See Figure 1-4.) To undock a 
panel, drag the grabber away from the edge of the screen. 


+ Hide/Display panels: Press F4 to toggle hiding and displaying all the 
panels. 


+ Stack: You can stack panels one on top of the other to save space. Drag 
the panel by its grabber beneath another panel. (See Figure 1-4.) 


+ Expand and Collapse: You can collapse a panel to just a title bar when 
you need more space on your screen — this option makes it easy to 
reopen the panel when you need it again. You can either click the panel’s 
title bar or click the Expand/Collapse arrow at the left side of the title 
bar. (See Figure 1-4.) 
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Figure 1-4: 
Use panels 
to specify 
settings and 
display 
information 
about 
objects. 


Title bar 





w Color Mixer | 


Docked, expanded panel 


Grabber 
Docked, collapsed panel 
Options menu icon 











Expand/Collapse arrow 





Distribute: 
ESka be a a 


ce 











Undocked panel 
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You can find more information about specific panels throughout this book. 
For example, Chapter 2 includes a discussion of colors as well as the panels 
that you need to use to create and work with colors. 


The Properties panel 


The Properties panel is a special panel that you use almost all the time. The 
Properties panel is context-sensitive, which means that it changes depending 
on what you’re doing. For example, if you’re working with text, you see all 
the possible text properties, as Figure 1-5 shows you. If you select a rectan- 
gle, you see the properties of that shape. Usually, you keep the Properties 
panel open at the bottom of the screen, either expanded or collapsed. The 
Properties panel has its own special Expand/Collapse arrow at its lower-right 
corner that you use to display additional properties. 


To set the properties of an object, select the object and enter the properties 
in the appropriate boxes of the Properties panel. You can find specific 
details about the Properties panel (for example, the size of the fonts you’re 
using in your movie) throughout the rest of this book in the context of the 
topics of each chapter. 


Library 

Every Flash document file has its own Library. Whenever you import a 
graphic, video, or sound, Macromedia Flash saves it in the Library. If you 
save a graphic object as a symbol (see Book IV, Chapter 3 for a description 





Figure 1-5: 
The 
Properties 
panel lets 
you inspect 
and change 
the 
properties 
of your 
objects. 


Figure 1-6: 
The Library 
contains 
named 
objects that 
are saved 
with a Flash 
document 
file. 
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of how to do this), the object goes in the Library, as well. The Library stores 
every object that you may use again. These objects all have names so that 


you can easily find them. 














To use an object from the Library, click the keyframe on the Timeline where 
you want the object to appear and drag the object from the Library onto the 
Stage. (Keyframes are explained in Book IV, Chapter 5.) You can drag an 
object from the Preview window or from the item’s listing. Figure 1-6 shows a 
Library with several types of objects. 
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To keep your Library from becoming overwhelming, use the following 
Library tools: 


+ Use folders: Organize your Library items into folders. To create a new 
folder, click the New Folder icon. Then drag items onto the folder’s 
name. Double-click a folder to expand or collapse it. 


+ Sort: You can alphabetize Library items by any column. Click the head- 
ing of the column. To reverse the sort order, click the Sort Order icon. 


+ Rename: Double-click any item and type a new name. 


+ Delete: Select an item and click the Delete (Trashcan) icon. Macromedia 
Flash warns that you can’t undo this action. 


+ Update: If a sound, video, or bitmap file that you have imported has 
changed, you can update the Library to use the latest version of that file. 
Click the menu icon in the upper-right corner of a panel to display its 
Options menu and then choose Update. 


You’re not limited to using items in your current document’s Library. You 
can open a Library from any Flash document and drag any of its items into 
your movie. Choose File™Import™Import to Library and choose the file. The 
new Library opens as a stacked panel on your current Library panel. 


To see some sample Library items, choose Window™Common Libraries. You 
can find a good assortment of sounds and symbols that come with 
Macromedia Flash. 


Viewing the Stage 


As you work, you often need to zoom in to see part of the Stage more closely 
or zoom out to see the entire Stage. You may also want to pan — to move the 
display in any direction. 


At the upper-right corner of the Timeline, you can find the Zoom drop-down 
list, as Figure 1-7 shows you. Click the arrow to set the zoom percentage; 
choose a higher zoom setting to see objects on the Stage more clearly. 








Figure 1-7: 


5 7 faal 100% x | 
Zooming in. = Ê. 











You can also zoom in and out by using the Zoom tool in the View section of 
the Tools panel, which you can see in Figure 1-8. Follow these steps to use 
the Zoom tool: 


Figure 1-8: 


The View 
section of 
the Tools 

panel. 
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1. Choose the Zoom tool. 
The Options section displays the plus and minus icons. 


2. Choose the plus icon if you want to zoom in or the minus icon if you 
want to zoom out. 


3. Click anywhere on the Stage to zoom in or out. 


To pan, choose the Pan tool in the View section of the Tools panel and drag 
on the Stage in any direction. You can also use the scroll bars to pan. 














Setting Movie and Macromedia Flash Preferences 


Macromedia Flash offers you a lot of opportunities to customize the way it 
looks and functions. You may want to take a look at these features to make 
your work flow as smoothly as possible. 


Setting document properties 

One of the first things you do when you start a movie is to set the size and 
color of the Stage, along with other properties that apply to the entire Flash 
document. You can adjust these settings, using the Properties panel or the 
Document Properties dialog box. To use the Properties panel, follow these 
steps: 


1. Choose Window™Properties to display the Properties panel, if it isn’t 
already open. 
If the Properties panel isn’t expanded, click its title bar to expand it. 

2. Click the Stage to make sure that no other object is selected. 


The Properties panel looks like the one shown in Figure 1-9. 
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Figure 1-9: 
The 
Properties 
panel when 
no objects 
are 
selected. 


Figure 1-10: 
The 
Document 
Properties 
dialog box. 
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3. To change the Stage size, click the Size button. 


The Document Properties dialog box, shown in Figure 1-10, opens. 





Dimensions: 735px (width) x 519px (height) 


Match: [Printer] [contents } | Default | 





Framerate: 12 fps 


Ruler units: | Pixels ¥ 

















( Make Default | x) [canes 





. Add a title and description for your document in the appropriate 


fields. 


. Type the new width and height of the Stage in the Dimensions text 


fields. 


6. Click OK. 


7. To change the frame rate (the speed at which Macromedia Flash plays 


the frames), type a new number in the Frame Rate text field. 


The default is 12 frames per second (fps). 


. To change the Stage color, click the Background Color box. Choose a 


new color from the color picker. 


For more about colors, see Book IV, Chapter 2. 


If you use the Document Properties dialog box, you have more options. 
Follow these steps to modify the properties of your Flash movie: 


1. Choose Modify~Document. 


The Document Properties dialog box appears. (Refer to Figure 1-10.) 


«P 
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2. To change the Stage size, type the new width and height of the Stage 
in the Dimensions text fields. 


As a shortcut, click the Match Printer button to set the Stage size to 
match the current paper size, or click the Match Contents button to set 
the Stage size to the minimum size that you need to encompass all the 
objects. 


To get the smallest possible Stage size, put all your objects at the upper- 
left corner of the Stage. 


3. To change the units that the ruler uses, choose the Ruler Units drop- 
down list and select an option. 


You can choose from pixels (the default), inches, centimeters, millime- 
ters, and points. 


Creating your own keyboard shortcuts 


You can change any shortcut and create your own. To create shortcuts, 
choose Edit™Keyboard Shortcuts to open the Keyboard Shortcuts dialog 
box, as you can see in Figure 1-11. 


You can’t change the set of shortcuts that come with Macromedia Flash. 
However, you can create a duplicate set of shortcuts and modify the dupli- 
cate. Give the duplicate a new name, such as MyShortcuts. 


The following buttons, located at the top of the Keyboard Shortcuts dialog 
box, can help you manage your shortcuts: 

+ Duplicate Set: Duplicates a shortcut set 

+ Rename Set: Renames a set of shortcuts 

+ Export Set as HTML: Saves your preferences as an HTML file 

+ Delete Set: Deletes a set of shortcuts 
After you have a new set of shortcuts from the Commands drop-down list of 
the Keyboard Shortcuts dialog box, choose the types of commands that you 
want to change. You can change any of the following types of commands by 
selecting their name from the Commands drop-down list: 

+ Drawing Menu Commands: Commands from the Drawing menu 

+ Drawing Tools Commands: Tools in the Drawing toolbox 


+ Test Movie Menu Commands: The menu that appears when you choose 
Control’Test Movie 


+ Actions Panel Commands: Commands that control the look and func- 
tion of the Actions panel 
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Figure 1-11: 
Use the 
Keyboard 
Shortcuts 
dialog box 
to customize 
shortcuts. 
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Click the plus sign (+) on the list of commands (not all commands have the 
plus sign) to display all the commands and their current shortcuts. To create 
a new shortcut, follow these steps: 
1. Choose the command that you want. 
2. Click the Add Shortcut button. 
Macromedia Flash adds a new shortcut. 
3. Press the key (for example, A) for the shortcut that you want to use. 


You must press Ctrl in conjunction with the shortcut key. If you want to 
create a shortcut that’s already assigned, that command appears. You 
can decide to override the shortcut, or you can choose another key for 
your shortcut. 


e To change that predefined shortcut, click Change. 


e If you don’t want to use that shortcut, with the <empty> value 
selected on the Shortcuts list, click Remove Shortcut. 


4. To change another shortcut, repeat Steps 1 through 3. 
5. Click OK. 


Getting Help 


If you need more help than you can find in this book, use Macromedia 
Flash’s Help system and tutorials, both of which come with the product. 


Figure 1-12: 
Use the 
Help feature 
when you 
have a 
question. 
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Getting Help 


To open Help, choose Help™Using Flash. The opening screen looks like 











Figure 1-12. 
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Flash 8 Help 


© 2005 All Rights Reserved 








Macromedia Flash includes both a set of lessons and a tutorial. Choose 
Help™Lessons™Introduction to start with the lessons, which are more 
geared towards first time users than the tutorial. 


To try the tutorial, choose Tutorials from the main Help screen. If you have 
the printed manual, you can find the tutorial in Chapter 1. 
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Chapter 2: Using the Graphics Tools 


In This Chapter 

Understanding when to use the Flash tools 
Creating shapes and text 

Changing shapes and text to fit your needs 


Adding some color 


] his chapter shows you how to use the drawing and editing tools in 
Macromedia Flash 8 to create graphics and text. To produce great ani- 
mation, you need great graphics. 


Choosing When to Use the Macromedia Flash Tools 


Book IV, Chapter 1 explains the difference between vector and bitmap 
graphics. Use the Macromedia Flash drawing tools when you want to create 
vector graphics for fast download times. 


To create more detailed graphics, you may want to use Fireworks 8 or 
FreeHand MX because they have more advanced creation and editing tools. 
You may also want to use these programs to edit existing bitmaps. On the 
other hand, you may have bitmaps, such as a photograph or complex logo, 
that you can get only as a bitmap. To use any bitmap, import it. (See Book 
IV, Chapter 3 for the scoop on importing graphics.) 


Creating Shapes and Text 


You use the Tools panel to create shapes and text in Macromedia Flash. See 
Figure 2-1 for the details of the Tools panel. The Tools section of the Tools 
panel offers many tools for creating and editing images. Most tools have 
options that specify how the tool works. 
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The Tools Hand tool —=4 a~ Zoom tool 
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creation and 
editing 
tools. 
When creating shapes in Macromedia Flash, you need to keep in mind what 
happens when two or more shapes touch: 
+ Ifthe shapes are the same color: They combine. You can use this tech- 
nique to create complex shapes. 
+ If the shapes are different colors: The top shape replaces and cuts out 
the overlapping part of the bottom shape. 
+ If you use the Pencil or Line tool to intersect any other shape: The line 
«i? and other shape are cut at their intersection. 


If you don’t see the Tools panel, choose Window™Tools to make it visible. 


Line tool 
The Line tool draws straight lines. You can continue to draw connected lines 
to create any shape you want. 


To draw a line, follow these steps: 


1. Choose the Line tool from the Tools section of the Tools panel. 
2. From the Properties panel, choose a color by clicking the Stroke 
Color box. 


If the Properties panel isn’t visible, choose Window™Properties to make 
it appear. 
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You can also find the Stroke Color box in the Colors section of the Tools 
panel. A stroke is another word for a line or the outline of any shape in 
Macromedia Flash. 


. Type a stroke weight (width) in the Stroke Height box of the Properties 


panel or click the arrow next to the point size box and use the vertical 
slider to choose a stroke weight. 


. Choose a stroke style from the Stroke Style box of the Properties panel. 


To create a custom stroke style, click the Custom button in the 
Properties panel. 


. Click the Stage where you want to start the line and drag (while hold- 


ing the mouse button down) to the ending point. 


Release the mouse button. 


To constrain the line to multiples of 45 degrees, press Shift while dragging. 


Oval tool 


An oval has both a stroke (outline) and a fill color. Use the Oval tool to draw 
ovals and circles, following these steps: 


— 


5. 


. Choose the Oval tool from the Tools section of the Tools panel. 


. From the Properties panel, choose a stroke color by clicking the 


Stroke Color box and choosing a color. 


If the Properties panel isn’t visible, choose Window™Properties to make 
it appear. 


You can also find the Stroke Color box in the Colors section of the Tools 
panel. As with the Line tool, you can also set a stroke weight and style. 


. From the Properties panel, choose a fill color by clicking the Fill Color 


box. 


. Click the Stage where you want the upper-left portion of the oval to 


be and drag (while holding the mouse button down) diagonally to the 
lower right. 


Release the mouse button. 


To create a circle, press Shift as you drag the mouse. 


Rectangle tool 


Like an oval, a rectangle has both a stroke and a fill. You can draw rectangles 
and squares with the Rectangle tool by following these steps: 
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— 
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. Choose the Rectangle tool from the Tools section of the Tools panel. 


. From the Properties panel, choose a stroke color by clicking the 


Stroke Color box and choosing a color. 


If the Properties panel isn’t visible, choose Window™Properties to make 
it appear. 


You can also find the Stroke Color box in the Colors section of the Tools 
panel. As with the Line tool, you can also set a stroke weight and style. 


. From the Properties panel, choose a fill color by clicking the Fill 


Color box. 


. To draw a rectangle with rounded corners, click the Rounded Rectangle 


Radius button (the button with the curved black line and the little blue 
semi-square underneath it) in the Options section of the Tools panel, 
type a radius, and press Enter. 


The larger the number entered in the Corner Radius field, the softer the 
curve in the rectangle’s edges. 


. Click the Stage where you want the upper-left corner of the rectangle 


to be and drag (while holding the mouse button down) diagonally to 
the lower right. 


Release the mouse button. 


To create a square, press Shift as you drag the mouse. 


Polystar tool 


In addition to the Rectangle tool, Macromedia Flash 8 includes a tool for cre- 
ating other kinds of polygons. To use the Polystar tool, follow these steps: 


1. 


Click and hold down the Rectangle button in the Tools section of the 
Tools panel. 


2. Select the Polystar icon from the menu that appears. 


3. In the Properties panel, click the Options button. 


This step opens the Tool Settings dialog box, as you can see in Figure 2-2. 


. Select a style of polygon from the Style drop-down list. 


The Polygon option creates a true polygon, while the Star option creates 
a multipointed star. 


. Enter the number of sides for the polygon or star. 


The larger the number of sides, the closer to a circle a polygon looks. 
For the star, more points creates a starburst-like effect. 


Figure 2-2: 


The Tool 
Settings 
dialog box 
lets you 
customize 
the look of 
your 
polygon. 
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Tool Settings 
Style polygon lv 
Number of Sides 5 
Star point size | 0.50 
OK Cancel 





6. Enter a value for the star point size. 


The larger the star point size, the more dull the star becomes, making it 
look closer to a circle. 


Pencil tool 


The Pencil tool works somewhat like a real pencil. You can draw artistic 
shapes with it. To draw with the Pencil tool, follow these steps: 
1. Choose the Pencil tool from the Tools section of the Tools panel. 


2. From the Properties panel, choose a stroke color by clicking the 
Stroke Color box and choosing a color. 


If the Properties panel isn’t visible, choose Window™Properties to make 
it appear. 


You can also find the Stroke Color box in the Colors section of the Tools 
panel. As with the Line tool, you can also set a stroke weight and style. 


3. Click the Pencil Mode button in the Options section of the Tools panel, 
and from the pop-up menu, choose one of the following: 


e Straighten: Straightens wiggly lines and changes sloppy rectangles, 
ovals, and triangles to perfect ones 


e Smooth: Smoothes out curved lines 


e Ink: Slightly smoothes and straightens, but mostly leaves your draw- 
ings the same 


4. Click the Stage where you want the drawing to start and drag on the 
Stage. 


You can draw angles and curves. 


5. Release the mouse button. 
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To constrain each line segment to 90-degree angles, press Shift as you drag 
the mouse. To refine how the options work, choose Edit™Preferences and 
click the Editing tab. Use the Smooth Curves and Recognize Shapes drop- 
down lists to edit the options described above. When you’re done, click OK. 


Pen tool 


You can use the Pen tool to draw straight lines and curves. The Pen tool 
offers the greatest editing control and the most control over curves. Using 
the Pen tool takes some practice (as most users will no doubt be using 
either a mouse or a trackpad), but soon you can find it very flexible. 


To better see how a Pen tool drawing looks, choose Edit™Preferences and 
click the Editing tab. Select the Show Pen Preview check box. Click OK. 


Follow these steps to work with the Pen tool: 


1. Choose the Pen tool from the Tools section of the Tools panel. 


2. From the Properties panel, choose a stroke color by clicking the 
Stroke Color box and choosing a color. 


If the Properties panel isn’t visible, choose Window™Properties to make 
it appear. 


You can also find the Stroke Color box in the Colors section of the Tools 
panel. As with the Line tool, you can set a stroke weight and style. 


3. You can draw either straight segments or curves, as follows: 


e To draw a straight segment: Click the start point and click the end 
point. Don’t drag. Click additional points to add segments. Double- 
click to finish. 


e To draw a curve: Click the start point and move the mouse in the 
desired direction that you want the next point of your shape to be; 
then click and drag your mouse in the direction that you want to 
create the curve. Let go of the mouse to lock that portion of the 
shape and continue clicking and dragging to create additional 
curves. Double-click to finish. 


To close a figure, place the cursor near the start point until you see a small 
circle and then click. Press Shift as you draw to constrain the lines or curves 
to 45-degree angles. 


Brush tool 

The Brush tool fills areas with a brushlike effect. You can vary the shape and 
width of the stroke. The Brush tool creates fills, so you use the Fill Color 
button to set the color. To draw with the Brush tool, follow these steps: 


ar 
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1. Choose the Brush tool from the Tools section of the Tools panel. 


2. From the Properties panel, choose a fill color by clicking the Fill Color 
box and choosing a color. 


If the Properties panel isn’t visible, choose Window®Properties to make 
it appear. 


You can also find the Fill Color box in the Colors section of the Tools 
panel. 


3. Choose a brush mode by clicking the Brush Mode button in the Options 
section of the Tools panel and choosing one of the following options: 


e Paint Normal: Paints wherever you brush, including over other 
objects on the same layer (see Book IV, Chapter 4 for more details on 
layers) 


e Paint Fills: Fills enclosed and blank areas, but doesn’t cover strokes 


e Paint Behind: Paints blank areas of the Stage, but doesn’t cover fills 
or strokes 


e Paint Selection: Fills in a selected area 


e Paint Inside: Paints inside any enclosed area where you start your 
brush or on the Stage if you don’t start in an enclosed area; doesn’t 
cover strokes 


4. Choose a brush size by clicking the Brush Size drop-down list in the 
Options section of the Tools panel. 


5. Choose a brush shape by clicking the Brush Shape drop-down list. 


If you have a pressure-sensitive pen and tablet, you see a pressure button 
in the Options section. You can then dynamically vary the width of the 
brush according to how much pressure you put on the pen as you draw. 


6. Click the start point and then drag to draw with the brush. 
Press Shift as you draw to constrain your shapes to 90-degree angles. 


If you want your gradient fill to be independent of the background fill, make 
sure that you don’t have the Lock Fill option button selected. If, however, 
you’re creating more than one stroke and you want it to appear as if the gra- 
dient is in the background and being applied to both strokes, select the Lock 
Fill option button. 


Paint Bucket tool 


The Paint Bucket tool fills enclosed shapes. You can create the enclosed 
shape with many of the other tools in the Tools panel. You can also use the 
Paint Bucket tool to change the color of existing fills. To fill an enclosed area, 
follow these steps: 
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1. Choose the Paint Bucket tool from the Tools section of the Tools panel. 


2. From the Properties panel, choose a fill color by clicking the Fill Color 
box and choosing a color. 


If the Properties panel isn’t visible, choose Window™Properties to make 
it appear. 


You can also find the Fill Color box in the Colors section of the Tools 
panel. 


3. Click the Gap Size button in the Options section of the Tools panel, 
and from the pop-up menu, select an option if you need to fill ina 
shape that isn’t completely enclosed. 


You can choose from Don’t Close Gaps to Close Large Gaps. 


4. Click inside the enclosed area to fill the shape. 


Ink Bottle tool 


The Ink Bottle tool outlines an existing shape or changes the color of an 
existing stroke (outline). Follow these steps to use the Ink Bottle tool: 


1. Select the Ink Bottle tool from the Tools section of the Tools panel. 


2. From the Properties panel, choose a stroke color by clicking the 
Stroke Color box and choosing a color. 


If the Properties panel isn’t visible, choose Window™Properties to make 
it appear. 


You can also find the Stroke Color box in the Colors section of the Tools 
panel. You can set a stroke weight and style, as well. 


3. Click anywhere on the shape. 


If the shape has no stroke outline, Macromedia Flash adds a stroke. 
Otherwise, Macromedia Flash changes the shape’s color, width, and 
style to the settings that you choose. 


Text tool 

Sooner or later, you may need to explain what all those animations that 
you’ve created mean, so you probably need some text. Macromedia Flash 
offers many text options, both simple and advanced. To create text, follow 
these steps: 


1. Choose the Text tool from the Tools section of the Tools panel. 


2. In the Properties panel, which you can see in Figure 2-3, specify the 
font, size, color, and other properties. 


If the Properties panel isn’t visible, choose Window™Properties to make 
it appear. 





Figure 2-3: 
Use the 
Properties 
panel to 
set the 
properties 
of your text. 
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3. Click the Stage and start typing, as follows: 


e To specify the width of the text (when creating a paragraph), click at 
the upper-left corner where you want the text to start and drag to the 
right margin. 


e To create text that expands as you type (for a single line of text), just 
click. 
You can specify the following text properties in the Properties panel: 
+ Text type: Use the Text Type drop-down list to specify one of the follow- 
ing types of text: 
e Static: Regular text. 


e Input: Text that users type in their browser. You can use input text to 
make your Web site interactive. Use input text for forms or to enable 
users to set values that affect the animation. 


e Dynamic: Text that you display from another source, such as 
another Web site, another movie (SWF) file, or an external file. You 
can use this type of text for weather, sports scores, and so on. 


Font: The font or typeface. Select from the drop-down list. 
Font size: Type a number or use the vertical slider to choose a size. 
Color: Click the Text fill) Color box to choose a color. 


Bold/Italic: Click the Bold button or the Italic button to make the text 
bold or italic. 


+++ + 


+ Justify: Click one of the Justify buttons to make the text justified to the 
left, center, or right, or full justified (justified to reach both the left and 
right margins). 

+ Character spacing: Adjust the tracking, the spacing between a series of 
letters. 


+ Character position: Select Superscript to create text above the normal 
position or Subscript to create text that appears below the normal posi- 
tion. For normal text, just keep it at Normal. 


Book IV 
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+ Auto Kern: Kerning is the spacing between two specific letters. You may 


adjust the kerning of certain letters, such as A and V, that appear to be 
too far apart. Select the Auto Kern check box to turn kerning on; dese- 
lect it to turn kerning off. 


+ Aliasing: By default, all text is aliased, or smoothed. If you want the text 


to appear anti-aliased, or jagged, select from one of the available options 
in this drop-down menu. You can also customize the thickness and 
sharpness of the anti-alias by selecting the Custom Anti-Alias option. 


Format: Click the Format button to open the Format Options dialog box, 
where you can set paragraph formatting, as follows: 


e Indent: The indentation of the first line of a paragraph. 


e Line Spacing: The spacing between lines, measured in points. If your 
text is 18 points, for example, set a line spacing of 18 points to 
double-space the text. 


e Margins: You can set the pixel width for both the right and left margins. 


Click the Expand/Collapse arrow at the lower-right corner of the Properties 
panel for more advanced text options. 


Modifying Shapes and Text 


If you create something on a computer, you inevitably have to change it. 
Sometimes you change your mind, and other times you just need to make 
adjustments to get the effect that you want. 


Selection tool 
Before you can change an object, you need to select it. To select an object or 
group of objects, choose the Selection tool (the dark arrow at the top left of 
the Tools panel) and use one of the following techniques: 

+ To select one object: Click the object. 


+ To select several graphic objects that touch each other: Double-click 


one of the objects. (Double-clicking doesn’t work with symbols. See 
Book IV, Chapter 3 for more about symbols.) To select a rectangle’s 
stroke and fill, double-click the fill. 


To select several objects that don’t touch: Click away from the objects 
and drag diagonally to create a bounding box around the objects that 
you want to select. Macromedia Flash selects all objects that are com- 
pletely inside the box. 


See the section “Reshaping with the Selection tool,” later in this chapter, for 
information on reshaping objects by using the Selection tool. 
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The Selection tool has a Snap button in the Options section of the Tools 
panel. When you click this button, objects that you move snap to other 
objects so that you can attach two objects precisely. The Snap option also 
snaps new objects that you create to existing objects. 


Lasso tool 


You can also select your objects by lassoing ‘em. Use the Lasso tool when 
you want to select a number of objects but can’t get them in a rectangular 
bounding box. You can drag the mouse and create a free-form shape or use 
straight-line segments by following these steps: 


1. Choose the Lasso tool from the Tools panel. 
2. Choose the type of lassoing that you want: 


¢ To lasso free-form: Click anywhere on the Stage, drag around the 
objects that you want to select, and then release the mouse button. 


e To lasso with straight-line segments: Choose the Polygon button 
from the Options section of the Tools panel. Click anywhere on the 
Stage and continue to click at each segment’s end point. Double-click 
to finish. 


Moving and copying objects 

You can move and copy objects on the Stage in many ways. The best method 
depends on the circumstances and your personal preferences. Move and 
copy objects using the following methods: 


+ Select and drag: Use the Selection tool to select an object. Then move 
the cursor over the object until you see the four-arrow cursor. Click and 
drag to move the object. Press and hold Ctrl while you drag to copy the 
object. 


+ Arrow keys: Select an object and use the arrow keys to move the object 
one pixel at a time in the direction of the arrow. 


+ Properties panel: Select an object and open the Properties panel. Click 
the Expand/Collapse arrow at the lower-right corner to display the 
expanded panel. Use the X and Y text fields to set a new location for the 
object. 


+ Cut, copy, and paste: Select an object; then press Ctrl+X to move (cut) it 
or Ctrl+C to copy it. If you want to paste the object somewhere else, 
click another layer or frame. Then press Ctrl+V to paste the object. 
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Eraser tool 


To delete any object, select it and press Delete. However, to erase part of an 
object, use the Eraser tool, following these steps: 


1. Choose the Eraser tool from the Tools panel. 


2. Select the eraser size and shape from the Eraser Shape pop-up menu 
in the Options section of the Tools panel. 


3. To specify how the Eraser tool works, choose an option from the 
Eraser Mode pop-up menu: 


Erase Normal: Erases anything that you drag across. 
Erase Fills: Erases only fills. 

Frase Lines: Erases only strokes. 

Erase Selected Fills: Erases only selected fills. 


Erase Inside: Erases only fills where you first click. Use this option to 
erase only fills inside an enclosed area, leaving other fills alone. 


4. With the Faucet option (in the Options section of the Tools panel) 
deselected, click and drag on the Stage to erase. 


To erase an entire fill, select the Faucet option (in the Options section of the 
Tools panel) and click the fill. This method is the same as selecting a fill and 
pressing Delete, as if the faucet washes away all the color. 


Reshaping with the Selection tool 


You can reshape and modify objects using the Selection tool when the 
objects aren’t selected. You can reshape both end points (including corners) 
and middles (whether straight or curved), as Figure 2-4 shows you, ina 
couple of ways: 


+ End points: Place the cursor over the end point of a line or curve seg- 
ment. You see a small corner shape near the cursor. Click on that point 
and drag to a new location on the Stage to change the location of the 
end point. 


+ Middles: Place the cursor over the middle of any line or curve segment. 
You see a small curved shape near the cursor. Click on that point and 
drag to a new location on the Stage to reshape the segment. 


Figure 2-4: 
Reshape 
end points 
and middles 
of fills 

and lines 
with the 
Selection 
tool. 


EN 
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Subselect tool 


The Subselect tool looks like the Selection tool, but the Subselect tool is a 
white (rather than black) arrow. Both the Selection tool and the Subselect 
tool reshape objects, but the Subselect tool uses a more sophisticated tech- 
nique. When you use the Subselect tool, the shape displays anchor points 
that you can move or delete. When you click an anchor point, tangent lines — 
lines that are parallel to the curve at the anchor point — appear and enable 
you to change the direction of the curve. You can reshape strokes or fills that 
you created with the following tools: 


+ Pen + Oval 
+ Pencil + Rectangle 
+ Line + Brush 


To reshape objects with the Subselect tool, follow these steps: 


1. Choose the Subselect tool from the Tools panel. 
2. Click a stroke or the edge of a fill to display the anchor points. 
3. Drag any anchor point to modify the shape. 


4. To change the direction of a curve, select its anchor curve and then 
drag the tangent line’s handles (the dots at either end of the tangent 
line). 


To delete an anchor, select the object and then click the anchor point that 
you want to delete. The anchor point turns dark. Then press Delete. 


Free Transform tool 


The Free Transform tool is the heavyweight of editing tools — it can do 
almost anything. To use this tool, choose it from the Tools panel and select 
an object. The object displays a special bounding box that includes handles 
and a central transformation point, as you can see in Figure 2-5. 
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Figure 2-5: 
The 
bounding 
box of the 
Free 
Transform 
tool. 


Figure 2-6: 


Tapering the 
fish makes 
its back end 
wider. 











You can use the Free Transform tool in the following ways: 


+ 


+ 


Move: Place the cursor over the object. When you see the four-arrow 
cursor, click and drag. 


Rotate: Place the cursor just outside (but not on) any corner handle. 
When you see a circular arrow cursor, click and drag. 


Scale while maintaining proportion: Place the cursor on any corner 
handle. When you see a broken two-arrow cursor, click and drag inward 
or outward. 


Scale either the height or width: Place the cursor on any side handle. 
When you see a two-arrow cursor, click and drag inward or outward. 


Skew (slant either horizontally or vertically): Place the cursor any- 
where on the bounding box, but not on a handle. When you see the par- 
allel line cursor, click and drag in any direction. 


Move the transformation point: Place the cursor on the transformation 
point at the center of the bounding box. When you see a small circle 
cursor, click and drag in any direction. Flash uses the transformation 
point as a base for rotation and scaling. 


Taper: Choose the Distort option of the Free Transform tool from the 
Options section of the Tools panel. Place the cursor on any corner 
handle and press Shift as you click and drag inward or outward. (See 
Figure 2-6 for an example of tapering.) 





Modifying Shapes and Text 381 


+ Distort: Choose the Distort option of the Free Transform tool from the 
Options section of the Tools panel. Click and drag any handle to distort 
the bounding box. (See Figure 2-7 for an example of distortion.) Note: 
The Distort option works on shapes, but not on symbols (see Book IV, 
Chapter 3 for more on symbols), text, or groups. (You can find out more 
about groups in the “Grouping” section, later in this chapter.) 





3 a 





Figure 2-7: 
Distort the 
upper-right 
corner of 
the goldfish, 
and it looks 
more like a 
shark. 





+ Warp: Choose the Envelope option of the Free Transform tool from the 
Options section of the Tools panel. Drag any anchor point or tangent 
line handle to warp the bounding box. 


The Envelope option, which you can see in Figure 2-8, works on shapes, but 
not on symbols, text, or groups. 


Figure 2-8: 
Fine-tune 
shapes by 
using the 
Envelope 
option of the 
Free 
Transform 
tool. 
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Figure 2-9: 
The 
Optimize 
Curves 
dialog box. 


When you select an object — for example, a circle — with the Free Transform 
tool, you may notice that the tool selects the object, but not the stroke 
around the object. To select both the object and its stroke, click the Free 
Transform tool and drag it around the entire object. This tool creates one 
bounding box for both the fill and the stroke. 


Straightening and smoothing with the Selection tool 


You can straighten lines and smooth curves with the Selection tool. Both 
processes reduce the number of changes in direction. You can repeat the 
process until Macromedia Flash can’t straighten or smooth anymore. Follow 
these steps to straighten lines and smooth curves: 


1. Choose the Selection tool from the Tools panel. 


2. Select the shape that you want to modify. 


3. To straighten, click the Straighten button from the Options section of 
the Tools panel. To smooth, click the Smooth button. 


4. Continue to click the Straighten or Smooth button until you like the 
result. 


Optimizing curves 

A process called optimizing curves is similar to smoothing curves. 
Optimizing a curve reduces the number of individual elements that the 
curve contains and can help reduce the size of your Flash document file. 
Follow these steps to optimize curves: 


1. Choose the Selection tool from the Tools panel. 
2. Using the Selection tool, select the object that you want to optimize. 
3. Choose ModifyShape™ Optimize. 


The Optimize Curves dialog box appears, as you can see in Figure 2-9. 
You can select Use Multiple Passes for a slower, more thorough 
approach. If you select the Show Totals Message check box, the amount 
of optimization appears after you close the dialog box. 











Optimize Curves 
Smoothing: 7 OK 
None Maomum [ Cancel | 





Options: Use multiple passes (slower) 











[V] Show totals message 
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4. Choose the amount of smoothing by using the slider in the dialog box. 


5. Click OK. 
NING! 
% Carefully check the results after optimizing. Sometimes small objects disap- 
pear! If you don’t like the results, choose Edit®Undo and try again with a dif- 
ferent Smoothing setting. 


Softening edges 

To create a soft look around the edges of a shape, follow these steps: 
1. Choose the Selection tool from the Tools panel. 
2. Using the Selection tool, select a shape. 
3. Choose Modify®>Shape®>Soften Fill Edges. 


The Soften Fill Edges dialog box opens, as you can see in Figure 2-10. 








Soften Fill Edges i] 
Figure 2-10: | Distance: | SE a 
The Soften 
Fill Edges Direction: © Expand 
dialog box. Olnset 


Number of steps: | 4 Cancel | 





4. In the Soften Fill Edges dialog box, set the distance. 
The default distance is the width of the softened part of the edge, in pixels. 


Macromedia Flash uses the units that you set in the Document Properties 
dialog box to measure the distance. Choose Modifty®Document to change 
the measurement units. 


5. Enter the number of steps, that is, the number of concentric rows in 
the softened edge. 


6. Select Expand or Inset. 


The Expand option creates the softened edges outside the shape. The 
Inset option creates the softened edges within the shape. 


7. Click OK. 


Flipping 

You can make symmetric shapes easily by drawing half the shape, copying it, 
and flipping the copy either vertically or horizontally. You can then move the 
two shapes together, as Figure 2-11 shows you. To flip an object, follow these 
steps: 
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Figure 2-11: 
Create this 
shape by 
copying the 
crescent, 
flipping it 
horizontally, 
and then 
moving the 
two shapes 
together. 





1. Choose the Selection tool from the Tools panel. 
2. Using the Selection tool, select the object. 


3. Choose ModifyTransform™Flip Vertical or Flip Horizontal. 


Transferring properties with the Eyedropper tool 


The Eyedropper tool transfers stroke and fill properties from one object to 
another. To transfer properties, follow these steps: 

1. Choose the Eyedropper tool from the Tools panel. 

2. Select a stroke or fill. 


If you select a stroke, the Ink Bottle tool activates. If you select a fill, the 
Paint Bucket tool activates. 


3. Click another stroke or fill. 


Macromedia Flash transfers the properties of the stroke or fill to the 
second object. 


Grouping 

You often want to work with several objects at one time. Instead of having to 
select all the objects each time you want to move or copy them, you can 
group them and work with them as one object. To group objects, select them 
and choose Modify™Group. 


You can edit one element of the group by following these steps: 


1. Choose the Selection tool from the Tools panel. 
2. Double-click the group. 


Macromedia Flash dims other objects on the Stage. 


Figure 2-12: 


Use the 
Align panel 
to align and 
equally 
space 
objects, 
such as 
buttons for 
your Web 
site. 
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3. Edit any element of the group. 


4. To return to regular editing, double-click any blank area on the Stage 
with the Selection tool. 


Alternatively, you can choose Edit™Edit All to return to regular editing. 


To ungroup objects, select the group and choose Modify™Ungroup. 


Breaking objects apart 

You can break apart text into letters and then break apart the letters into 
shapes. After you break apart letters into shapes, you can edit them like any 
other shape. You can also break apart symbols (see Book IV, Chapter 3), 
groups, and bitmaps. (See the section “Working with bitmap fills,” later in 
this chapter, for more information.) 


Aligning objects 
To get a professional look, you may want to make sure that objects are prop- 
erly aligned and equally distributed. To align and distribute objects, follow 
these steps: 

1. Choose the Selection tool from the Tools panel. 

2. Using the Selection tool, select the objects. 

3. Choose Window™Align. 


The Align panel, which you can see in Figure 2-12, appears. 
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4. Choose the options that you want in the Align panel, as follows: 


e Use the top row to align the selected objects horizontally or vertically. 
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e Use the middle row to evenly distribute objects horizontally or verti- 
cally by their edges. 


e Use the Match Size buttons to match the size of selected objects by 
width, height, or both. 


e Use the Space buttons to distribute objects by the spaces between 
them. 


e Use the To Stage button to align or distribute objects relative to the 
Stage. 


To center an object on the Stage, click the To Stage button on the Align 
panel. Then click the middle Align Vertical and Align Horizontal buttons. 
However, if you haven’t panned or scrolled your display, you can use a 
quicker method — just cut and paste the object. Macromedia Flash pastes 
the object at the center of the display. 


Working with Colors 


Figure 2-13: 


The Color 
Mixer panel 
is the place 
to create 
new colors. 


By default, Macromedia Flash works with a Web safe palette of 216 colors. 
These colors probably appear the same in all browsers. However, you can 
create your own colors. You can also design gradients that vary from one 
color to another. Or you may want to try the technique of filling objects with 
bitmap images (this is explained in the “Working with bitmap fills” section, 
later in this chapter). 


Creating solid colors 


You can create a solid color when you need to take more artistic license than 
the standard Web safe palette allows. Follow these steps to create a solid 
color: 


1. Choose Window™Design Panels™Color Mixer. 


The Color Mixer panel, which you can see in Figure 2-13 with the Solid 
option active, opens. 
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You can specify colors using the RGB (Red, Green, Blue) or HSB (Hue, 
Saturation, Brightness) systems. You can see the current system by the 
letters that are next to the text fields in the panel. In Figure 2-13, you can 
tell that the RGB system is active because the text fields are labeled R, G, 
and B. To choose a different system, click the menu icon in the upper- 
right corner of the panel to open the panel’s Options menu and choose 
the color system that you want. You can also use the color space in the 
panel to specify a color. 


2. Select Solid from the Fill Style drop-down list. 


3. Click the Stroke Color or Fill Color icon (to the left of the Stroke or Fill 
box), depending on whether you want to change a stroke or a fill. 


You can use this color later for either a stroke or a fill if you save the 
color as a swatch, as Step 6 explains how to do. 


4. Type the color specifications in the text fields, or click a color in the 
color space and use the slider to make the color lighter or darker. 


5. Use the vertical slider next to the Alpha field or text field to set the 
transparency of the color. 


A higher alpha percent is more opaque. 


a 


. To save the color, create a color swatch by clicking the Options menu 
icon in the upper-right corner of the panel and choosing Add Swatch. 


You can now see your new color displayed in the Stroke Color or Fill Color 
box in the Properties panel and in the Colors section of the Tools panel. You 
can use any of the tools to work with that color. If you add a color swatch, 
you can continue to use that color later by choosing it from the color palette 
that opens when you click the Stroke Color or Fill Color box. 


Creating gradients 


Gradients blend one color (lighter with darker) or many colors in either a 
linear or radial (circular) pattern. Gradients give the appearance of shading 
and three dimensions. To create a gradient, follow these steps: 
1. Choose Window™Design Panels™Color Mixer. 
The Color Mixer panel opens. 


2. From the Fill Style drop-down list, select Linear or Radial to specify 
the type of gradient that you want to create, as you can see in 
Figure 2-14. 


3. Choose a pointer underneath the horizontal gradient bar. 


The pointer becomes black when you select it so that you know it’s 
active. 
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Figure 2-14: 


Use the 
Color Mixer 
panel to 
create 
gradients. 
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4. Use one of the following methods to select a color for that pointer: 
e Click the Fill Color box and choose a color. 


e Specify a color using one of the methods of creating a new color that 
you can read about in the preceding section. 


e Use the color space to specify a color. 
5. Repeat Steps 3 and 4 for all the pointers. 


You add a pointer when you want to add a new color to the gradient. 
Three pointers result in a three-color gradient. To add a pointer, click 
just beneath the gradient bar where you want the pointer to appear. To 
delete a pointer, drag it off the gradient bar. 


6. To save the gradient, click the menu icon in the upper-right corner of 
the Color Mixer panel and choose Add Swatch from the Options menu 
that appears. 


Editing fills 
After you create your gradient or bitmap fills, you may decide that you want 
to change them. (You can find out about bitmap fills in the following sec- 
tion.) To edit a fill, follow these steps: 

1. Choose the Gradient Transform tool from the Tools panel. 

2. Click a gradient or bitmap fill. 


Macromedia Flash places a boundary and editing handles around the fill, 
which vary with the type of fill, as you can see in Figure 2-15. 


3. Make one or more of the following changes: 
e Move the fill’s center: Drag the small circle at the center of the fill. 


e Change the fill’s width or height: Drag the square handle inward or 
outward. 


Rotate a fill: Drag the circle on the editing boundary (the endmost 
circle for a radial gradient). 


Figure 2-15: 


When you 
edit a fill, 
you see an 
editing 
boundary 
around 

the fill. 
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e Scale a bitmap fill: Drag the corner square boundary inward or 
outward. 


e Scale a radial gradient: Drag the middle circular handle on the edit- 
ing boundary inward or outward. 


e Skew a bitmap fill: Drag a circular handle on the top or side. 


Working with bitmap fills 

You can create a fill with a bitmap that you have imported. (See Book IV, 
Chapter 3 for more on importing bitmaps.) To create a fill with a bitmap 
image, follow these steps: 


1. 


Choose File™Import. 
The Import dialog box appears. 


. Choose the bitmap file that you want and click Open. 


The bitmap appears on the Stage. 


. Choose Modify~Break Apart. 


This action selects the entire image as a fill rather than as a single color 
when you use the eyedropper (in Step 5). 


4. Choose the Eyedropper tool from the Tools section of the Tools panel. 


a 


. Click the bitmap image. 


The Paint Bucket tool is activated, and the Fill Color button (in the 
Colors section of the Tools panel and in the Properties panel) displays 
the bitmap image. 


. Click the object that you want to fill. 


You may have to move the bitmap image that you imported if it covers 
your object. The bitmap is tiled — repeated throughout the filled area. 
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Chapter 3: Working with Symbols 


In This Chapter 


Understanding the importance of symbols 
Getting graphic with graphic symbols 
 Animating with movie clip symbols 


Making your site interactive with button symbols 


A symbol is any object or group of objects, an animation, or a Web 
button. You give the symbol a name and save it in the Library. (See 
Book IV, Chapter 1 for a discussion of the Library.) In this chapter, you can 
find out about symbols and how to use them. 


Appreciating the Importance of Symbols 


You need to know about symbols if you want to work in Macromedia Flash 8. 
The following are the three types of symbols: 


+ Graphic: The simplest type of symbol, and a useful way to save groups 
of objects that you want to reuse. You can animate graphic symbols. 


+ Movie clip: A little movie that you put inside your big movie. You can 
apply ActionScript, Macromedia Flash’s programming language, to a 
movie clip or within a movie clip to specify how it functions. The movie 
clip has its own Timeline, and you generally insert the movie clip on the 
Timeline of the main Flash movie to let it play. You can place movie clips 
inside each other, or nested. You may find movie clips useful for building 
complex animation and an interactive Web site. 


+ Button: You use buttons when you want your site viewers to click to go 
to another page or create some other effect. You use ActionScript to 
specify what happens when a viewer clicks a button. 


The rest of this chapter explains how to create and work with graphic, 
movie clip, and button symbols. 
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Working with Graphic Symbols 


Symbols are the building blocks of complex graphics and animation in your 
Flash documents. Symbols have the following qualities: 


+ You can easily use symbols repeatedly by dragging them from the Library 
onto the Stage. Each time that you drag something from the Library onto 
the Stage, you create an instance of the symbol. You can resize individual 
instances. 


+ Symbols reduce your file size (for faster browser display) because 
Macromedia Flash only stores the symbol definition once and remem- 
bers one object rather than many. 


+ Most animation requires symbols (or text or grouped objects). 


+ Symbols keep their integrity, so you can put other objects in front of 
them or behind them without the objects being joined or cut out. 


Working with Graphic Symbols 


You usually create a graphic symbol from objects that you’ve already cre- 
ated. For example, you may have a background that consists of a sky, grass, 
flowers, and the sun. Saving these objects as a symbol reduces file size and 
ensures that if you copy or move the background, all its components come 
along for the ride. 


Working with instances of symbols 


When you drag a symbol from the Library, the copy on the Stage is called an 
instance. You can have many instances of one symbol in a Flash document. 
You can change an instance so that it differs from its original symbol, and 
the original symbol in the Library remains intact. To change an instance, 
follow these steps: 


1. Select the instance by clicking it on the Stage with the Selection tool. 


Remember that changing an individual instance doesn’t change the 
symbol itself. 


2. Use the Properties panel to do one or more of the following: 


e Change the brightness, color, or transparency by selecting an option 
from the Color drop-down list. Select Advanced from the Color drop- 
down list to change both color and alpha (transparency) at the same 
time. 


e Change an instance’s type (graphic, movie clip, or button) by select- 
ing an option from the Symbol Behavior drop-down list. 
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You can also change the properties of an instance by using ActionScript. 
For more information on ActionScript, see Book IV, Chapter 8. If you 
need to refer to a symbol instance in your ActionScript, you can give 
that instance a unique name. Select the instance and enter the name in 
the Instance Name text field of the Properties panel. 


3. Use the Free Transform tool (or other editing tools) in the Tools panel 
to rotate, scale, or skew the instance. 





Creating graphic symbols 


To create a graphic symbol from existing objects, follow these steps: 
1. Using the Selection tool from the Tools section of the Tools panel, 
select the objects that you want to convert to a symbol. 
2. Choose Modify™Convert to Symbol or press F8. 


The Convert to Symbol dialog box appears, as you can see in Figure 3-1. 

















Figure 3-1: Convert to Symbol =] 
Convert an salb Cmn Ka 
object to a een ener EE [cae | 
symbol. O srentic Crna | 
3. In the Name text field, enter a name for the symbol. 
ay? Some people start the names of their symbols with a code that indicates 


the type of symbol. For example, you can start your graphic symbols 
with gr_ and then add the name of the symbol. Classifying your symbols 
in this way automatically alphabetizes them by their type and helps to 
keep clear which type of symbol you’re using. 


Select Graphic from the Behavior list of symbol types. Book IV 
Click OK. Chapter 3 


The objects that you selected are now one object, surrounded by a selec- 
tion border. The symbol is also stored, automatically, in the Library. 


poe 


You can achieve the same result by creating an empty symbol and then 
adding your objects. Follow these steps to do so: 
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1. Choose Insert™New Symbol to open the Create New Symbol dialog box. 


Make sure that you don’t have any objects selected when you perform 
this step. The Create New Symbol dialog box is the same as the Convert 
to Symbol dialog box (refer to Figure 3-1). 
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2. In the Name text field, enter a name for the symbol. 
3. Select Graphic from the Behavior list of symbol types. 
4. Click OK. 


You now find yourself in symbol-editing mode and are no longer on the 
main Timeline. 


5. Draw the objects for your graphic symbol. 
All these objects become part of your symbol. 


6. Choose Edit>Edit Document to exit symbol-editing mode and return 
to the main Timeline. 


The symbol is now in the Library and disappears from the screen. 


Using graphic symbols 

To insert an instance of a symbol, drag it from the Library onto the Stage. 
You can drag from the symbol’s icon in the Library list or from its preview at 
the top of the Library window. 


You can also use a graphic symbol (and any other type of symbol) from 
another Flash document file by following these steps: 
1. Choose Import™Import to Library. 


This step opens the Import to Library dialog box, where you can browse 
for Flash files. 


2. Choose the file that contains the symbol that you want. 
3. Click the Open button. 
Macromedia Flash opens another Library window. 


4. Drag symbols from the new Library window onto the Stage. 


Editing graphic symbols 

If you change the original symbol, every instance of the symbol that you’ve 
inserted also changes. This feature can save you a lot of time if you need to 
change the shape of all your buttons, for example. To edit a symbol, follow 
these steps: 


1. Select any instance of the symbol on the Stage. 


Although you start by selecting an instance of the symbol, when you 
edit it on the Stage, as Step 2 describes, you’re editing the symbol, not 
the instance. 
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2. Right-click the symbol instance and choose one of the following: 


e Edit in Place: This option lets you edit a symbol while still viewing 
other objects on the Stage. The other objects are dimmed so that 
you can distinguish them from the symbol. 


e Edit: If you select this option, you perform your edits in symbol- 
editing mode, which lets you edit a symbol separately from the main 
Stage and Timeline. You see only the symbol. 


e Edit in New Window: This option opens a new window, where you 
edit the symbol. You see only the symbol. 


3. Edit the symbol by changing its color, shape, or effects. 


4. Choose Edit™Edit Document to return to the main Timeline, or if you 
chose Edit in New Window, click the window’s Close button. 


You see all the instances of the symbol change to reflect the edits. 
ar 
To return to individual objects, you can break apart any instance of a 
symbol. Select the instance and choose Modify™Break Apart. 


Creating and Working with Movie Clip Symbols 


You can use movie clips for a number of reasons and in a number of different 
ways: 


+ Use a movie clip to create animation that you want to insert or load onto 
the main Timeline. 


+ Use a movie clip whenever you need to control its functioning with 
ActionScript. (For more information on ActionScript, see Book IV, 
Chapter 8.) For example, you can use ActionScript to control the size or 
color of a movie clip. You can also put ActionScript inside a movie clip 
to tell the movie to stop at a certain frame. You can’t control a graphic 
symbol with ActionScript. 


+ You can use movie clips to create interface elements, such as check 
boxes, radio buttons, and scroll bars. This type of movie clip is called a 
component (you can read more about components in Book IV, Chapter 8). 


+ You can also use movie clip symbols whenever you want to insert anima- 
tion into the main Timeline but keep the original movie in the Library for 
reuse. Figure 3-2 shows a movie clip in symbol-editing mode that will be 
an animation of a bouncing ball. If you want several bouncing balls on 
your Web site, you can drag the movie clip onto the Stage as many times 
as you want. 


Book IV 
Chapter 3 
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You can create a movie clip symbol from scratch or convert animation that 
you’ve created on the main Timeline to a movie clip. To create a movie clip 
symbol from scratch, follow these steps: 

1. Choose Insert™New Symbol to open the Create New Symbol dialog box. 

Make sure that no objects are selected when you perform this step. 

2. In the Name text field, enter a name for the symbol. 

3. Select Movie Clip from the Behavior list of symbol types. 

4. Click OK. 


You now find yourself in symbol-editing mode and are no longer on the 
main Timeline. In Figure 3-2, you can see the movie clip icon and the 
name of the movie clip, Bouncing Ball, just below the layer list. 


5. Create the objects or animation for your movie clip symbol. 


6. Choose Edit™Edit Document to exit symbol-editing mode and return 
to the main Timeline. 


The symbol is now in the Library and disappears from the screen. 
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Sometimes you create some animation on the main Timeline and later realize 
that you need to turn that animation into a movie clip. Follow these steps to 
create a movie clip from an animation: 


1. 


On the layer listing, click the first layer on the list, press Shift, and 
then click the last layer. 


All the layers are now selected. See Book IV, Chapter 4 for coverage of 
layers. 


2. Choose Edit™Copy. 


3. Make sure that no single objects on an individual frame are selected 


eet a 


10. 


and choose Insert™New Symbol. 

The New Symbol dialog box appears. 

In the Name text field, enter a name for the symbol. 

Select Movie Clip from the Behavior list of symbol types. 

Click OK to close the dialog box and enter symbol-editing mode. 
Click the first frame of the Timeline. 

This is the Timeline for the movie clip, not the whole movie. 
Choose Edit™Paste in Center. 

The frames are copied into the active layer. 


Choose Edit>Edit Document to return to the main Timeline of the 
movie and exit symbol-editing mode. 


The movie clip symbol is now saved in the Library. 


Delete the original animation by selecting all the layers (as you did in 
Step 1) and choosing EditTimeline>Remove Frames. 


You can drag a movie clip onto the Stage just like a graphic symbol. You also 
edit a movie clip in the same way that you edit graphic symbols. See the sec- 
tion “Working with Graphic Symbols,” earlier in this chapter, for detailed 
steps. 


Working with Button Symbols 


Buttons are a major component of Web sites. You can use buttons as links to 
move to other pages and sites, and some buttons trigger more complex 
actions, such as stopping music or starting an animation. 


Book IV 
Chapter 3 
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A button has the following states, which you define when you create the 
button: 


+ Up: The appearance of the button when the mouse cursor isn’t over the 
button. 


+ Over: The appearance of the button when the mouse cursor is over the 
button, but not clicking it. 


+ Down: The appearance of the button when the cursor clicks the button. 


+ Hit: The area of the button that responds to the mouse. This area is 
invisible. The hit state is often the same as the down state because it 
just defines the active area of the button. 


You may want to use the common technique of designing a button that changes 
color or size when you pass the cursor over the button and then changes again 
when you click it. This technique provides feedback that the button has 
responded to the user. Figure 3-3 shows a button’s four states. 


Figure 3-3: 

The four Support 
button 

states: up, Support 
over, down, 
and hit. 
Each state 
has a 
slightly Support 
different fill. 


| Support 


Creating simple button symbols 


Creating a button involves designing the look of the button for the first three 
states and the size of the button for the Hit state. Often, you add text to the 
graphic so that people know what the button is for. Follow these steps to 
create a button: 

1. Choose Insert®New Symbol. 

The Create New Symbol dialog box appears. 
2. In the Name text field, type a name for the button. 
3. From the list of behaviors, select Button and click OK. 


You now see the Button Timeline. The dot in the Up frame indicates that 
the frame is a keyframe. (See Book IV, Chapter 5 for more information on 
keyframes.) The Up frame is active. 
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. Draw the button for the Up state. 


You can create the graphic with Macromedia Flash’s drawing tools, an 
imported graphic, or an instance of a symbol. 


Place the graphic for all the button states at the center of the display. 
(Book IV, Chapter 2 explains how to center objects.) If the button images 
aren’t all in the same place, the button shifts when the viewer passes the 
cursor over or clicks the button. 


. Click the Over frame and choose Insert®>Timeline>Keyframe. 


The graphic that you created for the Up state in Step 4 is still on the Stage. 


. Draw the button for the Over state. 


Use the graphic for the Up state and change it (or leave it the same, if 
you want), or delete the graphic and draw a new one in its place. 


. Click the Down frame and choose Insert™Timeline™Keyframe. 


Create the graphic for the Down frame (as in Step 6). 
Click the Hit frame and choose Insert™Timeline™Keyframe. 
Create the shape that defines the active area of the button. 


You want this shape to completely cover all the graphics of the other 
states. Usually, you need only a rectangle or circle. If you ignore the Hit 
frame, Macromedia Flash uses the boundary of the objects in the Up frame. 


If you use text for the button, viewers have to hit the letters precisely, 
unless you create a hit area around the text. 


Choose Edit~Edit Document to return to the regular Timeline. 


To place a button on the Stage, use the Selection tool to drag the button 
from the Library to create an instance of the symbol. To edit a button, 
double-click it in the Library. 


Adding pizzazz to buttons 
Buttons don’t have to be simple. You can make your buttons more interest- 
ing in the following ways: 


+ Add a sound: You add a sound to a button’s Timeline in symbol-editing 


mode in the same way that you add a sound to a frame on the main 
Timeline. See Book IV, Chapter 6 for information on adding sounds. 


Add animation: Create a movie clip symbol, as you can read about in 
the section “Creating and Working with Movie Clip Symbols,” earlier in 
this chapter. Click the keyframe of the button’s Timeline that you want 
to contain the movie clip; for example, click the Over keyframe. Delete 
any existing graphic and drag a movie clip symbol that contains anima- 
tion from the Library onto the screen. 


Book IV 
Chapter 3 
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+ Add interactivity: In order for the button to do something, it needs 
some ActionScript. Drag an instance of the button onto the Stage and 
select that instance by clicking it with the Selection tool. Then use the 
Actions panel to add ActionScript to the button. See Book IV, Chapter 8 
for specific information about using ActionScript. 


Testing buttons 


After you create a button, you should drag an instance of it onto the Stage 
and test it. To test simple buttons, follow these steps: 
1. Choose Control™Enable Simple Buttons. 
2. Pass the cursor over the button and click it to see if the effects work. 
3. To select the button by clicking it, choose Control™Enable Simple 
Buttons again to disable the button. 


If your button contains movie clips, you need to test the entire movie to test 
the button. Choose Control™Test Movie and test the button. To close the 
movie window, click its Close button. 


Chapter 4: Making Vour Life Easier 
with Layers 


In This Chapter 


Y Getting familiar with layers 
Adding depth to your work with layers 
Getting what you need from your layer options 


Organizing your layers in folders 


ou can use layers to organize your Flash document. Layers are an 
important part of creating a movie for the following reasons: 


+ Layers keep objects from bumping into each other. If you draw two cir- 
cles and overlap them, they either merge or one creates a cut-out of the 
other. However, if you put the two circles on two separate layers, they 
each remain whole. 


+ Each animated object needs its own layer. If you want more than one 
object on the Stage at a time, you need to create a new layer. 


+ ActionScript and sounds should have their own layer. This lets you 
easily find and troubleshoot any problems as well as avoid potential 
conflicts. 


+ Special types of layers let you create special effects: 


e Mask layers: Mask layers create a “keyhole” through which you can 
see layers beneath it. 


e Guide layers: Guide layers direct animation along a path. 


In addition, you can use layers for your own organizational purposes. For 
example, you can put text on a separate layer. Then, to focus on just the 
text, you can hide all the other layers. In this chapter, we explain how to 
create and manage layers. 


Layers add a third dimension to the organization of your Flash document. 
The Stage lays out your graphics in the horizontal (X-axis) and vertical 
(Y-axis) dimensions. Using layers is like adding a Z-axis, letting you place 
graphics on top of each other as if they were on successive transparent 
sheets. 
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The Timeline, of course, adds the fourth dimension — time. Layers are inti- 
mately connected to the Timeline. For each layer, Macromedia Flash adds a 
row of frames in the Timeline. 


Working with the Layer List 


You work with layers on the Layer list, which you can find to the left of 
the Timeline, as Figure 4-1 shows you. The Layer list contains the following 
features: 

+ Default layer: You start a new movie with the default layer, Layer 1. 


+ Active layer: The active layer is highlighted in gray. When you create 
objects, they go on the active layer. 


+ Show/Hide Layers: You can show or hide objects on any layer by click- 
ing the Show/Hide icon for that layer. 


+ Lock/Unlock Layers: You can lock any layer so that you can’t select or 
edit objects. Click the Lock icon for that layer. To unlock a layer, click 
the Lock icon again. 


Show/Hide layers 
Lock/Unlock layers 








Active 
layer Display outlines 
Figure 4-1: 
Use the 
Layer list to 
manage 
your layers. 






Delete layer 
Insert layer folder 
Add motion guide 


Insert layer 


+ Display Outlines: You can display objects on a layer as outlines. Each 
layer uses a different outline color. Outlines may help you see objects on 
all layers more clearly. Click the Outlines icon for any layer. 


+ Insert Layer: To insert a layer, click the Insert Layer button below the 
Layer list. 
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+ Add Motion Guide: To add a motion guide layer, click the Add Motion 
Guide button below the Layer list. See the section “An introduction to 
guide layers,” later in this chapter, for more information on guide layers. 


+ Insert Layer Folder: You can organize layers into folders. Click the 
Insert Layer Folder button below the Layer list. 


+ Delete Layer: To delete a layer, select it and click the Delete Layer 
button, or drag the layer to the Delete Layer button. 


Working with Layers 


ar 


When you open a new movie, it has one layer, called Layer 1. As you work, 
you create, delete, move, and copy layers. You also name your layers. 
Choose a naming system that makes sense to you. Note: If you make the 
names too long, you can’t see the whole name in the Layer list, so don’t get 
too extravagant. You can drag the right border of the Layer list to the right 
to see more of the layer names. 


Creating layers 

When you need to create a new layer, click the Insert Layer button at the 
bottom of the Layer list (refer to Figure 4-1) or choose InsertTimeline™Layer. 
The new layer appears above the active layer and becomes the active layer. 


You can also create a new layer by right-clicking a layer in the Layer list and 
selecting Insert Layer from the contextual menu that appears. 


Rename the new layer from its default name (Layer 1, Layer 2, and so on) 
immediately after you create it to avoid any confusion about what you’re put- 
ting on that layer. Double-click the layer name, type a new name, and press 
Enter. 


Using layers 

When you draw an object, it appears on the active layer, which is the layer 
that is highlighted and has a pencil icon next to its name in the Layer list. To 
draw on a different layer, click the name of the layer that you want to use. 
When you click a new layer, Macromedia Flash selects all the objects on that 
layer. To deselect the objects, click any empty area (on the Stage or in the 
gray space around the Stage). 


Editing layers 

You often need to make changes to layers or move objects from one layer to 
another. You need to keep your layers organized to keep your entire movie 
under control. 


Book IV 
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Selecting layers 


When editing layers, you may want to select more than one layer at a time, 
such as when you need to move more than one layer. To select a group of 
layers that are contiguous (meaning grouped together in a stack), click the 
first layer name on the Layer list, press and hold down Shift, and click the 
last layer of the group. To select layers that aren’t contiguous, click the first 
layer, press and hold down Ctrl, and click any additional layers that you 
want to select. 


Moving objects from one layer to another 


You often draw objects before you realize that you need them on a separate 
or different layer. For example, you can only have one object on a layer that 
you're animating. If you draw additional objects on that layer, you should 
move them to another layer. First create a new layer, if you don’t have one 
available. (See the section “Creating layers,” earlier in this chapter.) To move 
objects from one layer to another, follow these steps: 


1. Select the frames that represent the objects that you want to move by 
using the Selection tool. 


The layer that contains the objects is active and highlighted gray. To 
select more than one frame in a sequence, select the first frame, press 
and hold down Shift, and then select the last frame. 


2. Choose Edit™Cut. 
3. In the Layer list, click the layer to which you want to move the objects. 
4. Choose Edit™Paste in Place. 


The objects appear to be in the same location, but they’re now on a new 
layer. 


Distributing to layers 


In one of Flash 8’s great features, you can distribute all objects on a layer to 
separate layers. For example, to animate each letter of a word, you can put 
each letter on a separate layer. You may want to animate the letters of the 
word now so that each letter flies onto the Stage separately. Follow these 
steps to distribute objects to separate layers: 


1. Select the text or objects by using the Selection tool. 


For the purposes of this example, select the Text tool from the Tools sec- 
tion of the Tools panel, type now in a single frame, and then select the 
text. 


QING 
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2. If you’re working with text, choose Modify~Break Apart. Otherwise, 
skip to Step 3. 


You see a separate box around each letter. Each letter is now a separate 
object. 


3. Choose Modify™Timeline™Distribute to Layers. 


Each object or letter is now on a separate layer. Macromedia Flash auto- 
matically creates the layers for you. In the “now” example, Macromedia 
Flash creates three layers, named n, o, and w, for each of the three letters. 


The objects also remain on their original layer. Because you won’t be 


needing the entire object any longer, you generally want to delete the 
original layer and keep only the copies on the individual layers. 


Renaming layers 

If the content of a layer changes, you probably want to rename the layer to 
something appropriate to its new content. To rename a layer, double-click 
the layer name in the Layer list, type the new name, and press Enter. 


Deleting layers 
To delete a layer, select the layer in the Layer list and click the Delete button 
(it looks like a trash can) at the bottom of the list. (Refer to Figure 4-1.) 


Deleting a layer deletes everything on that layer. You may not be able to see 
everything on the layer because you see only what is on the Stage in the cur- 
rent frame. To see everything on a layer throughout the Timeline, follow 
these steps: 


1. Right-click the layer name in the Layer list and choose Hide Others 
from the contextual menu that appears. 
2. Click the first frame on the Timeline. 


3. Press Enter to run the animation. 


Copying layers 
You can copy an entire layer, and if you do, all the objects on that layer are 
copied as well. Follow these steps to copy a layer: 
1. Select the layer by clicking the layer’s name in the Layer list. 
Selecting the layer selects all the objects on the layer. 
2. Choose Edit™Copy. 
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Figure 4-2: 
By changing 
the layer 
order, you 
change 
which 
objects 
appear in 
front on the 
Stage. 





3. Choose InsertTimeline™Layer to create a new layer. 
4. Choose Edit™Paste in Center. 


Reordering layers 

Macromedia Flash displays objects in the order of their layers, from the top 
down. In other words, objects on the top layer appear in front of objects on 
the next layer. You can reorder the Layer list to change what objects appear 
in front on the Stage. See Figure 4-2 for an example. 
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To move a layer to a different spot in the Layer list, click and drag the layer’s 
name to the location that you want the layer to appear and then release the 
mouse button. 


An introduction to guide layers 

A guide layer is a special type of layer that’s invisible when you publish your 
Flash document and play it as a movie. Guide layers have the following main 
purposes: 


+ Drawing guide: You can place gridlines on the Stage to help you lay out 
the objects on the Stage, or you can import a bitmap and use it as a 
guide to help you draw using the graphics tools. The content on the 
guide layer is invisible when you publish the movie, but having the extra 
layer helps you draw. 


+ Motion guide: You can place a path on a guide layer that controls the 
animation of an object. You can read more about this process in Book IV, 
Chapter 5. 
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To create a drawing guide layer, follow these steps: 


1. Click the Insert Layer button on the Layer list. 


2. Right-click the layer and choose Guide from the contextual menu that 
appears. 


The layer icon changes to the guide icon that looks like a hammer. 


Using mask layers 

A mask layer sits on top of other layers, and acts, you guessed it, like a mask! 
A mask layer hides everything on its connected masked layers, except 
what’s inside the objects that are on the top mask layer. It, in effect, masks 
the content on the lower layers. You can use masks to create a spotlight 
effect, where you only see what’s in the spotlight and everything else is 
hidden. You can see this effect in Figure 4-3, where the circular mask hides 
everything outside of the circle. The circle is on a mask layer, and what you 
see inside the circle is on a masked layer. 


To create a mask layer, follow these steps: 


1. On the top layer of the Layer list, create the objects that you want to 
be visible through the mask. 


2. With the top layer selected, click the Add Layer button at the bottom 
of the Layer list. 


3. Draw a shape, such as a circle, on this new layer. 


4. Right-click the new layer and choose Mask from the contextual menu 
that appears. 


In the Layer list, the mask layer is locked (meaning it can’t be edited) by 
default and the masked layer is both locked and indented, showing that 
it’s connected to the mask layer above it. (Refer to Figure 4-3.) 


To edit a mask or masked layer, click the lock next to the layer name in the 
Layer list. Unlocking these layers removes the mask effect. After you finish 
editing, click the lock column next to the layers’ names again to redisplay 
the mask effect. 


To link a layer to a mask layer, drag the layer directly underneath a mask 
layer. The layer is indented. To display the mask effect, make sure that the 
layer is locked by clicking it under the Lock column in the Layer list. 
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Figure 4-3: 
The circular 
mask hides 
everything 
except what 
is inside the 
circle. 








"aati 
“°F Prepertes Fkers Parameters 


Tween: 


Ko sound selected 








Changing Layer Options 40 9 


Changing Layer Options 


ANG/ 
O 


<r 


You can control the visibility, editability, and display of objects on layers. 
These tools can really help you when you’re trying to isolate certain objects 
for editing or animation. 


Altering the visibility of objects 

You can hide all the objects on a layer. If you have a lot of objects on the 
Stage and want to edit objects on one layer, you can hide other layers that 
you don’t need to see at the moment. 


Don’t forget about objects on hidden layers. These objects still appear in 
your published movie. 


To hide a layer, click beneath the Eye icon on the layer’s row. An X appears 
in the Eye column to show you that the layer is hidden. Click the X to unhide 
the layer. 


To hide all layers except one, right-click the layer that you want to see and 
choose Hide Others from the contextual menu that appears. 


Locking and unlocking layers 

You can lock the objects on a layer so that you can’t edit them. You may find 
yourself accidentally selecting objects that you want to leave alone. This can 
get annoying, but you can easily avoid the situation by locking that layer. 


To lock a layer, click beneath the Lock icon on the layer’s row. A lock 
appears in the Lock column. Click the lock to unlock the layer. 


To lock all layers except one, right-click the layer and choose Lock Others 
from the contextual menu that appears. 


Setting layer properties 

Many of the layer controls that you can read about in this chapter all appear 
in the Layer Properties dialog box, as Figure 4-4 shows you. Most of the time, 
you just use the controls on the Layer list or the contextual menu that you 
see when you right-click a layer. However, the Layer Properties dialog box 
does have some unique features. 
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Figure 4-4: 
The Layer 
Properties 
dialog box. 
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To open the Layer Properties dialog box, select the layer that you want to 
modify and choose ModifyTimeline»Layer Properties. You can use this 
dialog box to do the following things: 

+ Rename the layer: Type a new name in the Name text field. 

+ Show/Hide the layer: Select or deselect the Show check box. 
+ Lock/Unlock the layer: Select or deselect the Lock check box. 
+ 


Change the type of layer: You can turn a layer into a guide, guided, 
mask, masked, or folder layer. 


+ 


Change the outline color: Click the Outline Color swatch to choose a 
new color. 


+ Turn outlines on/off: Select or deselect the View Layer as Outlines 
check box. 


+ Change layer height: Select a percentage from the Layer Height drop- 
down list. This percentage can increase the physical size of the layer to 
make it more viewable. 


When you finish making changes, click OK to close the Layer Properties 
dialog box. 


Using Folders to Manage Layers 


If you have many layers, you can organize them into folders. For example, 
you may want to put all your layers containing text in one folder. 


To create a folder, click the Insert Layer Folder icon at the bottom of the 
Layer list. A new folder appears above the current layer. Double-click the 
folder name and enter a name that describes the folder’s contents. 
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Use the following tips to manage folders: 


+ Put layers in a folder: Drag layers onto the folder’s row. 


+ Collapse and expand individual folders: Click the arrow at the left of 
the folder’s icon. 


+ Expand and collapse all folders: Right-click the Layer list, and choose 
Expand All Folders or Collapse All Folders from the contextual menu 
that appears. 


+ Remove a layer from a folder: Expand the folder, if it isn’t already 
expanded, and drag the layer above the folder name or to another loca- 
tion where it doesn’t darken a folder. 


+ Hide or lock an entire folder and its layers: Click beneath the Eye or 
Lock icon on the folder’s row. 


+ Reorder folders: You can change the order of folders, which also 
changes the order of the layers contained in the folder relative to other 
folders. Just drag any folder up or down. 


+ Delete folders: Select the folder and click the Delete (trash can) icon. 


\NG/ 
an 
s Deleting a folder deletes all the layers in the folder and everything on those 


layers. Macromedia Flash warns you of this fact if you try to delete a folder. 
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Chapter 5: Creating Animation 


In This Chapter 


Touring the Timeline 

Using frames and keyframes 
Approaching animation frame by frame 
Creating tweened animation 

Making interactive animation 


Working with scenes 


M acromedia Flash 8 is basically an animation program, so this chapter 
focuses on animation, the central purpose of Macromedia Flash. In 
this chapter, we provide the information that you need to create motion and 
shape animation. 


Getting Familiar with the Timeline 


The Timeline lays out your animation in time. In order to animate, you need 
to be thoroughly familiar with the Timeline (shown in Figure 5-1) and its spe- 
cial coding. 


As you can see in Figure 5-1, every fifth frame on the Timeline is numbered 
and each layer has its own row in the Timeline. (For more information on 
layers, see Book IV, Chapter 4.) 


Figure 5-1: Scene name Playhead Frame view 


The Timeline 
provides a 
great deal of 
information 
about your 
animation. 








Current frame number | Elapsed seconds 





Keyframe Frame rate Empty keyframe 
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If the Timeline isn’t visible, choose Window Timeline. You can collapse the 
Timeline by clicking its Collapse/Expand arrow at the left side of its title bar. 


Understanding the frame rate 


The frame rate is the speed at which Macromedia Flash plays the animation. 
The default frame rate is 12 frames per second (fps). You can have only one 
frame rate per document. To change the frame rate, follow these steps: 


1. Double-click the Frame Rate box at the bottom middle of the Timeline. 
The Document Properties dialog box appears. 


2. In the Frame Rate text field, enter a new number in frames per 
second. 


3. Click OK. 


When you use a frame rate that’s too slow, the animation appears jerky. 
Increasing the frame rate may make animation appear smoother, but a frame 
rate that’s too fast can appear blurred. The default frame rate of 12 fps is a 
good place to start. 


The Internet connection rate and the size of the file also affect the rate of 
animation. A large file (often due to large graphics or sounds) and a slow 
Internet connection can make the animation stutter. Your viewers can get the 
best results if you reduce the size of the file as much as possible. In Book IV, 
Chapter 7, we explain how to optimize files for the Web. 


Working with the Timeline 


You can work with the Timeline in the following ways: 


+ Go to a frame: Click the frame on the Timeline to go to a particular 
frame. If you want to work on a specific layer, click the frame in that 
layer’s row. 


+ Change size and appearance of the frames: To modify the frames as 
they appear in the Timeline, click the Frame View button in the upper- 
right corner of the Timeline and choose one of the options from the 
menu. You can change the width and height of the frames, turn coloring 
of frames on and off, and choose to display a small thumbnail of the 
frame’s content in each frame. 


+ Add a label or comment to a frame: To add a label or comment to a 
frame in the Timeline, select a frame and type a label name in the Frame 
Label text field in the Properties panel. 
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Select frames: Click a frame and drag across the frames you want to 
select. (You can also click the first frame, press Shift, and click the last 
frame you want to select to select all the frames in between.) 


Copy and paste frames: Select the frames you want to copy, choose 
Edit®Timeline™Copy Frames, click where you want the frames to go, 
and choose Edit™Timeline™Paste Frames. 


Move frames: Select the frames you want to move and drag them to the 
desired location. 


Add a frame: To add a frame, right-click the frame to the left of where 
you want to create a frame and choose Insert Frame from the contextual 
menu that appears. 


Delete frames: Select the frames you want to delete. Right-click and 
choose Remove Frames. 


Add a keyframe: Right-click the desired frame and choose Insert 
Keyframe from the contextual menu. 


Change the length of an animation: Click and drag the first or last 
keyframe of the animation to the right or left. 


Scroll along the Timeline: Use the horizontal scroll bar to scroll along 
the Timeline. Use the Vertical scroll bar (which appears when you have 
too many layers to display) to scroll through the layers. 


Onion skinning 

When you animate an object, you can display some or all of the animated 
frames at once, using an effect known as onion skinning. Onion skinning pro- 
duces overlapping translucent images like the translucent layers of an onion. 
See Figure 5-2 for an example of onion skinning. 


To work with onion skinning, use the buttons under the Timeline: 


+ 


+ 


Onion skin: Turns on onion skinning and adjusts the Onion markers to 
customize the number of frames that display the effect. 


Onion skin outlines: Displays single-color outlines of your animation. 


Edit multiple frames: Enables you to edit any of the frames on the 
Timeline, regardless of the current frame. 


Modify onion markers: Displays a menu that enables you to always 
show the markers (even when onion skinning is off), anchor the markers 
so they don’t follow the playhead (current frame marker), and set the 
number of frames that the markers cover. 
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Figure 5-2: 
Onion 
skinning 
helps you 
see your 
animation 
all at one 
time. 
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Onion skin outlines 


Using Frames and Keyframes 


A frame is actually a unit of time, based on your frame rate. You can place 
content on any frame, but you can only change content on a keyframe. Use a 
keyframe whenever you want to start or stop an animation or make any 
object appear or disappear. 


To introduce any new object onto the Stage, you must have a keyframe. Insert 
a keyframe by right-clicking the frame where you want the keyframe and 
selecting Insert Keyframe from the contextual menu. Click the keyframe on the 
layer where you want the object to appear and then do one of the following: 


+ Draw something by using the Macromedia Flash drawing tools. (See 
Book IV, Chapter 2.) 

+ Import a bitmap. (See Book IV, Chapter 3.) 

+ Drag an object onto the Stage from the Library. (See Book IV, Chapter 1.) 


Creating Animation Frame by Frame 4 17 


You can create two types of animation in Macromedia Flash: 


+ 


Frame-by-frame: In frame-by-frame animation, each frame is a keyframe 
and contains a slight change in your objects so that when you play the 
Flash document, you see a smooth animation. This type of animation 
takes a lot of time and creates bigger files, but you may need to use it to 
create complex effects. You do cartooning mostly by using frame-by- 
frame animation. 


Tweening: In tweening, the first and last frames of the animation are 
keyframes, and Macromedia Flash calculates everything in between. You 
can tween motion and shapes (morphing). You can create tweening 
much faster than frame-by-frame animation, and tweening creates small 
file sizes. Tweening does have one down side — you can’t do it with any 
type of object except vector graphics. 


Creating Animation Frame by Frame 


When your animation doesn’t have a simple pattern, such as movement of 
one object in a direction or the change of one shape to another shape, you 
need to use frame-by-frame animation. A common example of frame-by-frame 
animation is cartooning, where a figure needs to move in complex ways or a 
mouth moves in time with speech. 


«e 


To create frame-by-frame animation, follow these steps: 


1. 


Right-click a frame in the current layer where you want the animation 
to start and choose Insert Keyframe from the contextual menu. 


. Draw or import your image. 


Book IV, Chapter 2 tells you all about creating graphics. To import an 
image, choose File>Import. 


3. Right-click the next frame and choose Insert Keyframe again. 


4. Change the graphic slightly to create the second frame of the animation. 


5. Repeat Steps 3 and 4 until you complete your animation. 


See Figure 5-3 for an example of frame-by-frame animation. 


During the process, press Enter to play back your animation and check your 
work. 
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Figure 5-3: 
This frame- 
by-frame 
animation of 
legs moving 
is shown 
using onion 
skinning. 
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Motion tweening moves a single symbol instance, text object, or grouped set 
of objects either in a straight line or along a path that you draw (often with 
the Pencil tool). 


Although you can motion tween only one object at a time on any layer, you 
can tween other objects on other layers to create the overall look of many 
objects being animated. 


You can also change the size, rotation, skew (slant), color, and transparency 
of symbol instances as you motion tween them. To make these changes to 
text or groups, convert them to symbols. See Book IV, Chapter 3 for a discus- 
sion of symbols. 


Preparing to tween 


You can only put one object — symbol instance, text, or group — on the 
layer where you’re animating. First, you need to create the object you want 
to animate and make sure that nothing else is on that layer. Often, you want 
to create a new layer just for your animation. 


Decide how you want your object to move. Do you want its color, size, or 
rotation to change? After you decide, you’re ready to tween. 


The Macromedia Flash Controller is like a control panel for a CD or video 
player. You may find the Controller helpful when you animate because it 
offers controls for rewinding and playing your animation. To open the 
Controller, choose Window™Toolbars™Controller. 


ar 
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Creating a simple tween 

Before you tween, open the Properties panel by choosing Window™Properties. 
To create a simple motion tween that moves the object along a straight line, 
follow these steps: 


1. 


On your animation layer, insert a keyframe where you want the ani- 
mation to start. 


To add a keyframe, right-click the frame to the left of where you want to 
create a keyframe and choose Insert Frame from the contextual menu. 


. Click the keyframe and create the object or objects that you want to 


animate. 


You can’t tween plain graphics. If you need to, turn your object or 
objects into a symbol (see Book IV, Chapter 3) or a group (see Book IV, 
Chapter 2). You can tween text without having to change it. You can also 
import a graphic or drag an instance of a symbol from the Library onto 
the Stage. 


. Insert a keyframe where you want the animation to end. 


The longer the span of frames, the slower the animation. You can always 
adjust the length of a tween later, as you can read about in the “Working 
with the Timeline” section, earlier in this chapter. 


. Click the last keyframe and then move the object to its new location 


by using the Selection tool. 


At this point, you can also change the object’s color properties and 
transparency by using the Color box in the Properties panel. In addition, 
you can use the Free Transform tool or other Macromedia Flash com- 
mands to change the object’s size, rotation, and skew, as you can see in 
Figure 5-4. 


. Select the range from keyframe to keyframe by clicking the first 


keyframe and dragging to the last keyframe. 


If the span of frames is too long to show, click the first keyframe, scroll 
to the last keyframe, press Shift, and click the last keyframe. 


You can click anywhere between the keyframes and get almost the exact 
same result as you can get with the click-and-drag technique. The last 
keyframe isn’t tweened, but the result looks the same when you play the 
animation. 


. From the Tween drop-down list in the Properties panel, select Motion. 


If you changed the object’s size, select the Scale check box in the 
Properties panel to tween the size. 
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Figure 5-4: 
A simple 
motion 
tween that 
includes 
scaling. 
Onion 
skinning 
shows all 
the frames 
outlined. 
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7. If you want to rotate the object during the tween (in addition to any 
rotation you create in Step 4), select CW (clockwise) or CCW (counter- 
clockwise) from the Rotate drop-down list in the Properties panel and 
then enter the number of rotations in the Rotation Count text field. 


To test your animation, click the first keyframe and press Enter or use 
the Controller to rewind and play your animation. 


You can accelerate or decelerate the speed of the tween. To accelerate from 
beginning to end, enter a value between -1 and -100 in the Ease text field in 
the Properties panel. To decelerate, use a value between 1 and 100. 


See Figure 5-4 for an example of a ball that moves along a diagonal line. The 
ball also becomes smaller, so it appears to recede in the distance as it 
moves. 


Motion tweening along a path 


To tween along a path that isn’t a straight line, you need to draw the path on 
a guide layer. (See Book IV, Chapter 4 for the steps to create a guide layer.) 
Your animation is on the guided layer (the layer with the animation on it) 
that is associated with the guide layer (the layer that has the path that the 
animation follows on it). Figure 5-5 shows an example of a motion tween 
along a path. 


Figure 5-5: 
The star 
moves 
along a 
path, which 
you see 
here with 
onion 
skinning on. 
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To create an animation that moves along a path, follow these steps (which 
start just like the steps for simple motion tweening): 


1. On your animation layer, insert a keyframe where you want the ani- 
mation to start. 


To add a keyframe, right-click the frame to the left of where you want to 
create a keyframe and choose Insert Frame from the contextual menu. 


2. Click the keyframe and create or import the object or objects (Symbol 
instance, group, or text) you want to animate. 


3. Insert a keyframe where you want the animation to end. 


4. Select the range from keyframe to keyframe by clicking the first 
keyframe and dragging to the last keyframe, or click anywhere 
between the two keyframes. 


5. From the Tween drop-down list in the Properties panel, select Motion. 


6. In the Properties panel, select the Snap check box to snap the object 
to the path. 


7. If you want the object to rotate in the direction and angle of the path, 
select the Orient to Path check box. 
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8. Right-click the object’s layer and select Add Motion Guide. 


The new layer is added. The layer is labeled Guide, and the object’s 
layer is indented beneath it. 


9. On the guide layer, draw your path using the Pen tool. 


10. Click the first keyframe of the object’s layer and drag the object by its 
registration point (a small plus or circle) to the beginning of the path 
until the registration point snaps to the path. 


11. Click the last keyframe of the object’s layer and drag the object by its 
registration point to the end of the path until the registration point 
snaps to the path. 


12. Press Enter to play the animation. 


If you need to change your path, use the Macromedia Flash editing tools to 
edit the path that you created. You can use the Selection or Subselection 
tools to edit the path. (See Book IV, Chapter 2 for details on editing graphics.) 


The guide path isn’t visible in the published movie. However, you often don’t 
want to see the path even in your document, so you can more easily visual- 
ize the animation. Just click the eye column of the guide layer to hide it. 


Creating Tweened Shape Animation 


If you want your objects to change shape, you need shape tweening, often 
called morphing. Unlike motion tweening, shape tweening works only with 
plain vector objects, usually ones that you create with the Macromedia Flash 
drawing tools. You can’t shape tween a symbol instance, text, or a group 
unless you break it apart by choosing Modify™Break Apart. 


To turn text into shapes, choose Modify™Break Apart twice. The first time 
only breaks apart the text into individual letters. The second time you 
choose Modify™Break Apart, you create shapes from the individual letters. 
However, remember that you can have only one animated object on a layer. 
You can break apart text once and then choose Modify Timeline™Distribute 
to Layers to put each letter on a separate layer. If you want to shape tween 
the letters, break apart each letter a second time. 


Creating a simple shape tween 


To shape tween a shape, follow these steps: 


1. On a new layer, right-click the frame where you want the animation to 
start and select Insert Keyframe. 


2. Create the beginning shape. 


Figure 5-6: 
Shape hints 
show where 
you want 
points on 
your 
beginning 
shape to 
end up. 
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3. Insert a keyframe where you want to end the animation. 
4. With the second keyframe selected, create the ending shape. 


You can create the end shape by erasing the first shape and drawing a 
new one or by modifying the first shape. 


5. If you want to change color, you can simply choose another color for 
the ending shape from the Color box in the Properties panel. 


6. If you want to change transparency, open the Color Mixer panel 
(Window™Color Mixer) and change the Alpha percentage in the Alpha 
text field. 


You can also change the color in the Color Mixer. 


nN 


Click between the keyframes or select the entire span of the tween. 


~ 


Select Shape from the Tween drop-down list in the Properties panel. 


© 


From the lower section of the Properties panel, select Angular from 
the Blend drop-down list if your tween shape has straight lines and 
sharp corners. Select Distributive for more curvy shapes. 


You may need to click the Collapse/Expand arrow at the lower-right 
corner of the Properties panel to display the lower section of the 
Properties panel. 


10. To play the animation, click the first keyframe and press Enter. 


Using shape hints for more control 

When you create your first shape tween, you may find that Macromedia 
Flash calculated the transformation differently than you imagined it. You can 
give Macromedia Flash cues, called shape hints, that tell it which part of the 
original shape you want to move where, as you can see in Figure 5-6. 
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To use shape hints, follow these steps: 
1. Create a shape animation, using the steps in the section “Creating a 
simple shape tween,” earlier in this chapter 
2. Click the first keyframe of the animation. 
3. Choose Modify™Shape™Add Shape Hint or press Ctrl+Shift+H. 
A small red circle with the letter “a” inside it appears on the Stage. 


4. Drag the shape hint to the area in your shape where you want the 
shape to transform to your settings. 


5. Click the ending keyframe of the animation. 
You again see a small circle with the letter “a” inside it on the Stage. 


6. Drag the shape hint to the area in your shape where you want the 
beginning hint to move. 


7. Repeat Steps 3 through 6 to place additional shape hints. 


8. Press Enter to play the animation and check the results. 
If you want, you can remove or hide existing shape hints: 


+ To remove a shape hint: Drag it off the Stage. 


+ To display and hide shape hints: Select the layer and keyframe with the 
shape hints and choose View™Show Shape Hints. 


Adding Basic Interactivity to Animation 


You often need to control how your animation works. For example, you may 
want some animation to loop or to stop at a certain point. You may also want 
to enable viewers to control the animation. Buttons commonly allow users 
to stop the animation (perhaps some introductory animation for your Web 
site) or turn off the sound. You introduce interactivity and control by using 
ActionScript, the Macromedia Flash programming language. 


The following sections offer a few ideas for using ActionScript in animation. 
We cover interactivity in detail in Book IV, Chapter 9. 


Go To 


You don’t need to play your animation from beginning to end. You can add 
ActionScript (often simply called actions) to control the playing of the 
frames. The goto action tells the movie to go to a different frame. At that 
point, you can tell the animation to stop or to play. 
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Say that you want your animation to play from Frame 1 to Frame 24, but then 
you want the last half to loop over and over again. On Frame 24, you can add 
a goto action and tell Macromedia Flash to go to Frame 12 and play. The ani- 
mation goes to Frame 24 and then loops back to Frame 12 again. In this situa- 
tion, the first 11 frames play only once, but Frames 12 through 24 play over 
and over in a loop. 


In another situation, you may want animation to play from Frame 1 to 
Frame 24, and then go to Frame 50 and stop. You may be using Frame 50 to 
display a menu. In this case, you use the goto and stop actions. 


Stop 


Sometimes, you just want to stop the animation. For example, movie clips 
automatically loop. If you want them to play just once and then stop, you 
add a stop action in the last frame. For any animation, you can add a stop 
action at the end to make sure that everything stops at the same time. 


Play 


After you stop an animation, you may want to play it again. You can use the 
play action to play a movie when certain conditions are met (a rollover ora 
click for example). If the conditions aren’t met, the movie doesn’t play (due 
to a stop action). 


On (mouse event) 

You use the on action for buttons, which you can read more about in Book IV, 
Chapter 3. To add interactivity, you specify what happens when the button is 
clicked or released, when a mouse cursor passes over or off the button, or 
when a mouse cursor is dragged over or off the button. For example, you may 
want to use the on action to specify that when the button is clicked, you go to 
a different frame or URL, such as another page on the Web site. 


Working with Scenes 


A scene is a section of an animation. You can divide your animation into 
scenes, each with its own Timeline. The scenes play back in the order you 
set. You create a scene to help you organize your animation. By default, you 
work in Scene 1. The current scene name appears beneath the Layer list. To 
create a new scene, choose Insert™Scene. 


To manage your scenes, choose Window™Scene. The Scene panel opens, as 
you can see in Figure 5-7. 
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Figure 5-7: 
The Scene 
panel helps 
you manage 
scenes. 
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You can use the Scene panel to work with scenes in the following ways: 


+ 


+ 


Change scene order: Drag a scene’s name in the Scene panel to a new 
location to change the order of the scenes. 


Rename a scene: Double-click a scene’s name, type a new name, and 
press Enter to rename a scene. 


Add a scene: Click the Add Scene button at the bottom of the Scene 
panel to add a scene. 


Delete a scene: Select a scene and click the Delete Scene button at the 
bottom of the Scene panel to delete a scene. 


Duplicate a scene: Select a scene and click the Duplicate Scene button 
at the bottom of the Scene panel to create a copy of a scene. 


View a scene: Select the scene in the Scene panel to view the scene. 


Chapter 6: Adding Sound 
and Video 


In This Chapter 


Introducing sound and video formats 
Working with sounds 
Working with video clips 


ou can make the Web experience richer by adding sound and video to 

your Web pages. Sounds can range from a simple clicking noise when a 
user clicks a button to music and narration. You can also include video in 
your Web site. 


Exploring Sound and Video Formats 


ar 


Both sound and video files come in many formats. Before you can use sound 
or video, however, you need a file that Macromedia Flash 8 can import. 


Sound file formats 


Macromedia Flash supports several sound formats. These are the most 
common: 


+ AIFF: This is the standard sound format for Macintosh computers. 
These files usually have filenames with the .aif or .ief extensions. 


+ WAV: This is the standard format for Windows machines. These files 
usually have filenames with the .wav extension. 


+ MP3: This is a highly compressed format that maintains high-quality 
sound. 


If you have QuickTime 4 or higher installed on your computer, you can 
import Sound Designer II, Sun AU, and System 7 or higher sounds. 


A sound file has several properties that affect its quality and size. You can 
often adjust these properties to reduce file size without noticeably affecting 
quality. For sophisticated adjustments, you probably need a sound-editing 
program, such as SoundForge. Here are the basic properties of a sound file: 
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+ Sample rate: The sample rate is the number of times in kilohertz (kHz) 
that an audio signal is sampled when it’s recorded digitally. A higher 
sample rate results in higher quality sound but also yields a larger file 
size. 


+ Bitrate: The bit rate is the number of bits (pieces of data) used for each 
audio sample. Sixteen-bit sounds are clearer, but 8-bit sounds are 
smaller and may be good enough for simple sounds, such as a button 
click. 


+ Channels: Channels are the number of streams of sound in a file and are 
either mono or stereo. Mono may be just fine and uses half the amount 
of data as stereo. 


You can find a sound’s properties when you import the sound into Macromedia 
Flash, as explained in the section, “Importing sounds,” later in this chapter. 


Video file formats 


The types of video formats you can use depend on some other software that 
supports their playback: 


+ If you have QuickTime 4 or later installed: You can import AVI, MPEG 
(MPG), MOV, and DV formats. 


+ If you have DirectX 7 or later installed: You can import AVI, MPEG 
(MPG), and WMV/ASF (Windows Media File) formats. 


Because video files are usually very large, they are always compressed by 
using a codec. The word codec stands for compression/decompression. The 
same codec decompresses the video file when it is used. You need to have 
the codec that was used for the video file on your computer to be able to 
import the video file. The same applies to the audio track in a video file. 





Working with Sounds 


Working with sounds in Macromedia Flash involves at least two steps: 
importing the sound and placing it in a movie. You can also do basic sound 
edits in Macromedia Flash. 


Importing sounds 
To import a sound, follow these steps: 


1. Choose File>Import>Import to Library. 
The Import dialog box appears. 


<r 


Figure 6-1: 
Specify 
sound 
settings. 
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2. Select the sound file you want to import and click Open. 


The sound goes into the Library. 


To see a sound’s properties, open the Library, right-click the sound, and 
choose Properties from the contextual menu that appears. 


Placing a sound in a movie 


After a sound is in the Library, you can place it in your movie. You need to 
decide when it starts, when it ends, or whether you want to loop the sound. 


To place a sound, follow these steps: 


1. Create a new layer for the sound by choosing Insert™Timeline™Layer. 


2. Right-click the frame and choose Insert Keyframe from the contextual 


menu. 


This selection inserts a keyframe on the sound’s layer where you want 
the sound to start. 


3. Press Ctrl+L to open the Library or choose Window™Library. 


Scroll down to the sound file you’re looking for in the Library. 


4. Drag the sound to the Stage. 


The sound extends to the next keyframe, if one exists. 


5. To specify settings for the sound, open the Properties panel by choos- 


ing Window~Properties. 


. Expand the Properties panel, shown in Figure 6-1, using the 
Expand/Collapse arrow in the lower-right corner. 
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7. From the Sound drop-down list, choose the sound for which you want 


to specify settings. 


All the sounds you have imported are listed. 


8. To create a special effect, select an effect from the Effect drop-down 


list. 


You have the following choices: 


Book 


IV 
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None: No special effect (the default) 
Left channel: Plays the sound from only the left speaker 
Right channel: Plays the sound from only the right speaker 


Fade left to right: Starts playing from the left speaker and moves to 
the right speaker 


Fade right to left: Starts playing from the right speaker and moves to 
the left speaker 


Fade in: Starts playing softly and increases the volume 
Fade out: Starts playing loudly and decreases the volume 


Custom: Plays a custom effect if you edit the sound, as explained in 
the next section 


9. Select a synchronization type from the Sync drop-down list. 


You can choose from the following options: 


e Event: Plays the sound from its first keyframe until it ends (even if 


the movie stops), replays the sound whenever that keyframe plays, 
and downloads the entire sound before it plays. This choice is ideal 
for button sounds that you want to play whenever you click the 
button. Event is the default synchronization type. 


Start: Plays the sound like the Event option, but if the keyframe is 
replayed before the sound is finished, the Start option doesn’t replay 
the sound. 


Stop: Stops playing the sound. 


Stream: Synchronizes the sound with the animation, shortening or 
lengthening the animation to match the length of the sound. 
Macromedia Flash may skip frames if necessary. 


10. If you want to loop or repeat the sound, select either Loop or Repeat 


11. 


from the drop-down list beside it. 


If you select Loop, the movie simply repeats over and over again. If you 
select Repeat, you are asked to enter the number of repeats in the field 
provided. 


Press Enter to play the animation and hear the sound. 


Press Ctrl+Enter to test the movie if you’re working on a complex 
animation. 


Editing sounds 

Macromedia Flash contains its own simple sound-editing tool. For example, 
you can delete some of the beginning or end of the sound if you don’t need 
it. You can also change the volume. To edit a sound, follow these steps: 
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— 


. Click a frame that contains a sound. 
2. Open the Properties panel by choosing Window™Properties. 


If necessary, click the Collapse/Expand arrow at the lower-right corner 
to expand the Properties panel fully. 


3. Click the Edit button within the Properties panel. 


The Edit Envelope dialog box, shown in Figure 6-2, appears. In this con- 
text, envelope just means the entire snippet of music. 
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Figure 6-2: 
Edit sounds 
in the Edit 
Envelope 
dialog box. 
You can edit the sound as follows: 
e Change the volume: Drag an envelope handle up to increase volume 
or down to decrease volume. Click an envelope line to add a handle 
so that you can change the volume at that location. 
e Delete the beginning of the sound: Drag the Time In control to the 
right. 
Book IV 
e Delete the end of the sound: Scroll to the end of the sound and drag Chapter 6 
the Time Out control (the ending control) to the left. 
ay? You can use the Zoom In and Zoom Out buttons to change the magnification 


of the sound wave in the Edit Envelope dialog box. You can also use the 
Frames and Seconds buttons to change the display between frames and 
seconds. 


oapi, pue 
punog buippy 


Setting sound properties 

You can control the properties of a sound to further compress it. If you need 
to specify different properties for different sounds, set the properties when 
you place the sound in your movie: 
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Figure 6-3: 
Set the 
properties 
for individual 
sounds in 
the Sound 
Properties 
dialog box. 





1. Open the Library by choosing Window™Library or by pressing Ctrl+L. 


2. Double-click the sound icon next to the sound for which you want to 
see the properties. 


The Sound Properties dialog box, shown in Figure 6-3, appears. 
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Export settings 


[V] Use imported MP3 quality 


Compression: | MP3 {v 





16 kbps Mono 56.0 kB, 12.5% of orignal 


The top part of the dialog box lists the sound’s name, original location, 
and statistics. At the bottom of the dialog box, use the Compression 
drop-down list to select the file format you want: 


Default: Leaves the sound unchanged. 


ADPCM: Enables you to convert stereo to mono and to choose a 
sampling rate and bit rate. This option is used for short sounds. 


MP3: Enables you to convert stereo to mono and to choose a bit rate 
and quality. MP3 is an efficient compression method and is used for 
longer, more complex sounds, especially music. 


Raw: Enables you to convert stereo to mono and to choose the sam- 
pling rate. Raw uses no compression. 


Speech: Enables you to choose a sampling rate. This option uses 
compression specially designed for speech. 


As you choose an option, you see the resulting statistics at the bottom 
of the dialog box. 


3. Click the Test button to hear the result of your choice. 


You can also set sound properties for all sounds at once when you publish 
your movie. (See Book IV, Chapter 7.) 
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Working with Video Clips 


ay? In Macromedia Flash 8, you can embed video clips in your Flash movie. A 
video clip can be live action or animation created with an animation pro- 
gram that outputs a video file format. Note: Macromedia Flash may not be 
able to handle very long video files. You also have no direct control over the 
video frames. 


To use a video, follow these steps: 


1. Select a keyframe already on your Timeline (or create a new keyframe 
by right-clicking a frame and choosing Insert Keyframe from the con- 
textual menu that appears). 


2. Choose File>Import™Import to Library. 
The Import dialog box appears. 
3. Choose the video file you want and click the Open button. 


The Video Import Wizard appears, as shown in Figure 6-4. 
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Would you like to import the entire video or edit the video first: 


©) Import the entire video 


O Edit the video first 
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Figure 6-4: 
Follow the 


Video 
Wizard 


For expanded video capabilities, 
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4. Select either the Import the Entire Video or the Edit the Video First 
option. 


Most Windows video formats, such as AVI or WMV, are not editable 
before import. QuickTime, however, is editable. If you select the Edit the 
Video First option, you’re presented with a number of options, such as 
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10. 


combining clips and editing them to include only the parts you want to 
see. In either case, when you’re ready to move on, click the Next button. 


. Select a compression profile. 


You can select from one of the five compression algorithms that 
Macromedia Flash offers by selecting it from the drop-down list, or you 
can create your own by selecting the Create Your Own Profile option. 


. To choose the frequency of keyframes in the video clip, drag the 


Keyframe Interval slider. 


A video keyframe is separate from a Timeline keyframe. A video 
keyframe stores the entire image data as compared to the changes from 
the previous frame that are stored in regular frames. 


A keyframe interval of 0 adds a single keyframe at the beginning of the 
video stream and no other keyframes. 


. Select the Synchronize Video to Macromedia Flash Document Frame 


Rate option to match the video frame rate to the Flash movie frame 
rate. 


If your video display is poor, try deselecting this option. 


. From the Number of Video Frames to Encode per Number of Flash 


Frames drop-down list, select a ratio. 


The default is 1:1, which plays one video frame for each Flash frame. A 
ratio of 1:2 plays one video frame for every two Flash frames. A 1:2 or 
higher ratio reduces file size but reduces smoothness of playback as 
well. 


. Click OK. 


If the video clip is longer than the span of keyframes into which you are 
placing the video, a message appears, asking whether you want to add 
enough frames necessary to play the entire clip. 


Click Yes to add the frames. 


Chapter 7: Publishing Movies 


In This Chapter 


Publishing movies the easy way 
“ Optimizing movies for speedy download times 


Generating HTML and graphics 


A fter you finish creating your Flash document, you need to publish it in 
SWF movie format. You then use HTML code to insert the SWF movie 
in a Web page so that browsers can display the animation. In this chapter, 

we explain how to place your animation onto your Web site. 


Publishing Movies the Simple Way 


Figure 7-1: 
Use the 
Publish 
Settings 
dialog box 
to publish 
your movies. 


If you don’t need to change any settings, you can immediately publish 
your file by choosing File*Publish. For more control, choose File™Publish 
Settings to open the Publish Settings dialog box, as shown in Figure 7-1. 
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Formats |flash | HTML 
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HTML (htm) movingstar.html p 
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JPEG Image (jpg) movingstar Jpg 6 
PNG Image (.png) movingstar.png p 
Windows Projector (.exe) | movingstar.exe p 
Macintosh Projector movingstar.hqx p 

[C] QuickTime (.mov) movingstar.mov p 
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By default, Macromedia Flash 8 creates two files: the SWF file and an HTML 
file that contains the HTML code needed for your Web page. You can also 
export your document to other formats by selecting the format you want on 
the Formats tab. We discuss the HTML code and other export formats in the 
“Generating HTML and Graphics” section, later in this chapter. 


Macromedia Flash creates all these files by using the name of your Flash 
document and tacking on various filename extensions. If you want to specify 
the filenames, deselect the Use Default Names check box and enter your own 
filenames in the text fields. 


To post your movie on your Web site, you use the HTML code either by itself 
or within another Web page. Then you upload both the Web page and the 
SWF file as you would any other Web page and image. 


Macromedia Flash has many more options for you to tweak. To set these 
options, click the other tabs of the Publish Settings dialog box and select 
the options you want before clicking the Publish button. 


Click the Flash tab, shown in Figure 7-2, to see the options for creating the 
SWF file. You can set the following options: 


+ Version: Saves in previous version formats for backward compatibility. 


+ Load Order: Controls the loading order of layers in your document for 
the first frame (which usually takes the longest to display). 


Changing the load order can affect how your ActionScript code functions. 


+ ActionScript Version: Enables you to select the version of ActionScript 
you want to run in your movie. You can click the Settings button to spec- 
ify the classes to be exported if you select ActionScript 2.0 from the 
drop-down list. 


+ Generate Size Report: Creates a text file that details the size of the 
frames of your movie so that you can make adjustments if a movie is 
loading slowly. 


+ Protect from Import: Helps prevent the SWF file from being imported 
into an FLA file that others can then modify. 


Never trust that your SWF is completely safe. Tools to undo this option 
are available on the Web. 


+ Omit Trace Actions: Reduces file size by deleting trace actions if you 
used them in your ActionScript to help you debug your code. 


+ Debugging Permitted: Enables you to use the Macromedia Flash 
Debugger feature to debug errors in ActionScript. 


The debugger allows you to troubleshoot ActionScript problems from 
within your browser. You can protect this feature by using a password. 
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+ Compress Movie: Compresses your Flash document, especially text and 
ActionScript. Note: This feature is compatible only with the Flash Player 
6 or later. 


+ Optimize for Flash Player 6 r65: This feature optimizes your movie for 
playback on the Flash Player 6 or the 6.5 revision. 


+ Password: Enables you to enter a password for debugging so that those 
without the password cannot debug your movie. 


+ JPEG Quality: Sets the quality of bitmaps. Higher quality looks better 
but means a larger file size. 


+ Audio Stream: Sets the audio compression for all stream sounds in the 
movie, if you haven’t set individual settings in the Sound Properties 
dialog box. Click the Set button to set the compression. See Book IV, Book IV 


Chapter 6 for more information on stream sounds. Chapter 7 

+ Audio Event: Sets audio compression for all event sounds in the movie. > 
Click the Set button to set the compression. = 

72) 

+ Override Sound Settings: Overrides settings in the Sound Properties =. 
dialog box and applies settings here to all sounds in your movie. = 

[=] 

< 

=. 

7) 


Optimizing Movies for Speed 


As you work, be sure to always design for fast display on a Web site. You 
can’t control the speed of your viewers’ Internet connections or how fast 
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their computers’ processors are, but you can definitely control the size of 
your movie file. Before you publish your document, you may want to look it 
over from within Macromedia Flash and see how you can make it more effi- 
cient. After you publish and test the movie on a Web page, you may find that 
you need to make some adjustments for faster download. The following four 
sections offer some tips for optimizing your movies for speedy display. 


Simplifying graphics 
You can simplify the graphics in your movie and greatly increase its speed. 
Here are some pointers: 


+ 


+ 


Use tweened animation: Tweened animation is faster than frame-by- 
frame animation. (See Book IV, Chapter 5.) 


Don’t animate bitmaps: Macromedia Flash needs to store the location 
of each pixel in a bitmap, and that storage information greatly increases 
file size. In fact, avoid bitmaps altogether as much as possible. 


Turn everything into symbols: Even backgrounds should be symbols. 
You can also put symbols inside of symbols. (See Book IV, Chapter 3.) 


Group objects: Groups also reduce file size. (See Book IV, Chapter 2.) 


Optimize curves: Optimizing curves reduces the number of lines in your 
graphics. (See Book IV, Chapter 2.) 


Use solid lines: Avoid dashed and dotted lines. Especially avoid custom 
lines. (See Book IV, Chapter 2.) 


Use the Pencil tool rather than the Brush tool: The Brush tool requires 
your document to store more information. (See Book IV, Chapter 2.) 


Use the Web safe color palette: Avoid custom colors. (See Book IV, 
Chapter 2.) 


Use solid fills rather than gradients as much as possible: Gradients are 
more complex to calculate. 





Avoid transparency: As much as possible, avoid using alpha values of 
less than 100 percent. 


Optimizing text 
Text takes up more bytes in your file than vector graphics. Here are some 
options for reducing the load: 


+ 


Reduce the number of fonts: Use simpler fonts, fewer font styles (bold, 
italic), and fewer fonts overall. Use device fonts (sans serif, serif, and 
typewriter) if possible. 


The three device fonts display correctly in any browser and on any 
computer. 
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+ Put text into your HTML document: Not all text needs to be in your 
Flash document. If you put some of your text in HTML format, you get 
faster download times. 


Minimizing the size of sound files 

Sound and music can really hog up the download stream. (See Book IV, 
Chapter 6 for details about working with sounds.) You can use the following 
techniques to minimize the size of sounds: 


+ Compress sounds: Use the Sound Properties dialog box (right-click the 
sound in the Library and choose Properties from the contextual menu) 
to fine-tune settings for individual sounds, or compress sounds by using 
the sound settings (Audio Stream and Audio Event) on the Flash tab of 
the Publish Settings dialog box, described earlier in this chapter. Use the 
MP3 format whenever possible. 


+ Remove silent areas: Edit sounds to remove unnecessary beginnings 
and endings by adjusting the Time In and Time Out controls. 


+ Reuse sounds: You can reuse a sound with different in and out points or 
loop different parts of the same sound. 


+ Don’t loop streaming sound: Looping is not necessary, and the browser 
continually downloads streaming sound. 


Testing download time 

Macromedia Flash can simulate various Internet connection speeds and give 
you feedback on which frames may cause a delay in download time. Don’t 
miss out on this excellent tool. If the results indicate delays, go back and 
adjust your movie until the display is quick. You don’t want to lose your Web 
site visitors because they become impatient while waiting for your Flash 
movie to download! Follow these steps to test your movie’s download time: 


. Choose Control=Test Movie. 


— 


2. From the menu bar of the new window, choose ViewDownload 
Settings and choose a download speed. 


3. From the menu bar of the new window, choose View~>Bandwidth 
Profiler. 


The Bandwidth Profiler is shown in Figure 7-3. 


4. Choose View™Simulate Download to simulate playing the animation 
over an Internet connection. 


Watch for any jerkiness and listen for any breaks in the sound. 


5. Choose View™Streaming Graph to see all the frames that may cause 
delays or View™Frame by Frame Graph to see the size of each frame. 
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Figure 7-3: 
The 
Bandwidth 
Profiler can 
be used to 
show the 
frames that 
are 
displayed 
slowly on a 
Web site. 

















These are just two ways of viewing the information. You can use either 
view. Click on any bar (which represents a frame) to see the information 
for that frame. Frames that extend above the red horizontal line may 
cause a delay in the display of the movie. 


6. Choose File™Close to close the movie testing tools. 


A short delay in the first frame is often acceptable as Macromedia Flash 
downloads all the information. After the first frame, try to avoid any delays 
because they result in pauses or uneven animation. 


ay? Although the best solution is to minimize delays, another possible choice is 
a preloader, a short animation that plays over and over while the main ani- 
mation is loading. If you want your viewers to get to your movie quickly, 
work to reduce file size instead of using a preloader. If the artistry and spe- 
cial effects are primary, then use a preloader. 


Generating HTML and Graphics 


When you publish your Flash document, you also generate the HTML code 
that you need to create a Web page that plays your animation. You can also 
export your movie in several other graphic and animation formats. 
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Creating HTML code 


You can use the HTML code that Macromedia Flash generates to create a 
new Web page that contains nothing but your movie, or you can insert the 
HTML code into an existing Web page that may contain many other compo- 
nents. On the HTML tab of the Publish Settings dialog box, you can specify 
the following settings: 


+ Template: Specifies the content of the HTML file. The Flash Only (the 














default) option includes only <OBJECT> and <EMBED> tags. Other tem- 
plates add code to detect earlier Flash Players or offer other features. 
To see what each template does and which formats you need to choose, 
select the template and click the Info button. 














Dimensions: Controls the size of the movie in the browser. The default 
option, Match Movie, matches the width and height of your Stage. You 
can also specify the size in pixels or by percent. 


Playback: Paused at Start: Pauses the movie until your viewer clicks 
a button (that you have coded to start the movie) or right-clicks and 
chooses Play. By default, this option is off, so that the movie plays 
automatically. 


Playback: Loop: Repeats the movie over and over. By default, this 
option is on. 


Playback: Display Menu: Displays a contextual menu if viewers right- 
click. The menu allows viewers to play, loop, and print the movie. 
However, not all viewers know that this contextual menu exists. This 
option is on by default. 


Playback: Device Font: Substitutes anti-aliased fonts (that look 
smoother) for fonts not available on the user’s computer. This option is 
not selected by default. 


Quality: Sets the quality of playback. Choose one of the following: 
e Low: Uses no anti-aliasing (smoothing) 


e Auto Low: Starts at low quality and switches to the highest quality 
that the user’s computer (detected by the Macromedia Flash Player) 
can handle 


Auto High: Starts at high quality and switches to a lower quality if 
the user’s computer (detected by the Macromedia Flash Player) 
cannot handle high quality 


e Medium: Uses some anti-aliasing but doesn’t smooth bitmaps 


e High: Uses anti-aliasing for everything except tweened bitmaps (the 
default) 


e Best: Uses anti-aliasing for text, unanimated bitmaps, and tweened 
bitmaps 
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+ Window Mode: Specifies how the movie’s window relates to the rest of 
the page on the PC. Choose Window (a separate window), Opaque (an 
opaque background), or Transparent (a transparent background). 


+ HTML Alignment: Aligns the movie in the browser window. You can 
choose Default (centered), Left, Right, Top, or Bottom. 


+ Scale: Specifies how the movie is placed in its boundaries when you use 
the Pixels or Percent option of the Dimensions setting and the width and 
height are therefore different from the movie’s original size. The choices 
are Default (Show AID, No Border, Exact Fit, and No Scale. 


+ Flash Alignment: Specifies how the movie fits in the movie window (not 
the browser window). The Horizontal setting can be Left, Center, or 
Right. The Vertical setting can be Top, Center, or Bottom. 


+ Show Warning Message: Displays warning messages if problems occur 
during publishing. 


Creating graphic files 

You can create GIF, JPEG, and PNG graphic files from a frame of your Flash 
movie. Each type of graphics file has its own options. By default, 
Macromedia Flash creates the image from your first frame. 


To add a label to a frame, click the frame and open the Properties panel 
(choose Window™Properties). Expand the Properties panel by using the 
Collapse/Expand arrow at the bottom-right corner. Type the label name in 
the Frame text field. You can name a frame anything you want. Certain 
names, such as the #Static label, have specific meanings for the way 
Macromedia Flash functions. 


GIF files 

GIF files have limited colors but allow transparency. Select the GIF check 
box on the Formats tab of the Publish Settings dialog box. When you do 
that, a GIF tab appears. Then click the GIF tab, where you have the following 
settings: 


+ Dimensions: Enables you to select the Match Movie option to match the 
size of the Stage. To use a different size, deselect the Match Movie 
option and type the new dimensions. 


+ Playback: Enables you to select either the Static (a single image) or 
Animated (an animated GIF of the entire movie) option. If you select 
Animated, you can choose to loop continuously or repeat a specified 
number of times. 
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+ Options: Offers several options. Choose from the following: 
e Optimize Colors: Removes unused colors 


e Interlace: Loads in increments of greater resolution (starting from 
fuzzy) 


e Smooth: Anti-aliases the artwork 


e Remove Gradients: Removes gradients from the .gif images 


Dither Solids: Approximates colors not available on the GIF color 
palette 


+ Transparent: Allows you to set transparency (alpha) of the background. 


+ Dither: Defines the type of dithering, which is the approximation of a 
color from a mixture of other colors when the desired color is not avail- 
able. You can choose Ordered dithering, which provides good-quality 
dithering without much increase in file size, or you can choose Diffusion 
dithering, which provides top-quality dithering for the 216 Web safe 
colors but makes for a larger file size. 


+ Palette Type: Defines the GIF color palette. If you choose an adaptive 
palette, a unique color palette is created for the GIF. You can then 
choose the maximum number of colors. If you choose a custom palette, 
click the ellipsis button and choose a palette file. To save a palette 
of colors that you use in Macromedia Flash, choose Window™Color 
Swatches, click the Options menu icon in the upper-right corner of 
the Color Swatches panel, and choose Save Colors. 


JPEG files 

JPEG files allow for many colors but do not allow transparency. They decom- 
press when downloaded, taking up more memory. Select the JPEG check box 
on the Formats tab of the Publish Settings dialog box. Then click the JPEG 
tab (it appears after you select the JPEG check box), where you have the fol- 
lowing settings: 


+ Dimensions: Enables you to match the size of the Stage or specify 
another size. 


+ Quality: Enables you to choose the quality. Higher quality means a 
better picture but a larger file size. 


+ Progressive: Displays the JPEG file in increments of greater resolution 
(starting from fuzzy) as it downloads in a browser. 


PNG files 
PNG files offer many colors and transparency, too. Select the PNG check box 
on the Formats tab of the Publish Settings dialog box. Then click the PNG tab 
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(it appears after you select the PNG check box), where you have the follow- 
ing settings: 


> 


+ 


+ 


Dimensions: Enables you to match the size of the Stage or specify 
another size. 


Bit Depth: Controls the number of colors the image can contain and the 
availability of transparency (alpha). More colors — and adding trans- 
parency — increase the file size. 


Options: Offers several options. Choose from the following: 
e Optimize Colors: Removes unused colors. 


e Interlace: Loads the PNG file in increments of greater resolution 
(starting from fuzzy). 


e Smooth: Anti-aliases the artwork. 
e Remove Gradients: Removes gradients from the . png images. 


e Dither Solids: Approximates colors not available on the GIF color 
palette. This option is the same as for GIF images (explained 
previously). 


Dither: Enables you to use the same Dither settings as for GIF images, 
if you choose an 8-bit depth. This option is not available for other bit 
depths. 


Palette Type: Enables you to use the same Dither settings as for GIF 
images, if you choose an 8-bit depth. 


Max Colors: Same as for GIF images. 
Palette: Same as for GIF images. 


Filter Options: Determines the method of compression (the method of 
combining pixels in an image). Choose from the following options: 


e None: No compression 

e Sub: Filters adjoining pixel bytes, going horizontally 
e Up: Filters vertically 

e Average: Uses both horizontal and vertical 


e Path: Creates an algorithm using the three nearest pixels to predict 
the next pixel 


e Adaptive: Provides the most accurate colors 


Creating QuickTime movies 


QuickTime is a video format that plays on the QuickTime player. To use 
QuickTime movies, you need to have QuickTime 4 or higher installed. 


\NG/ 
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The Macromedia Flash Player doesn’t always keep up with QuickTime ver- 
sions. A movie that you create in Macromedia Flash may not work with the 
latest version of QuickTime. 


Select the QuickTime check box on the Formats tab of the Publish Settings 
dialog box. Click the QuickTime tab that appears, where you have the follow- 
ing settings: 


+ 


+ 


Dimensions: Enables you to match the size of the Stage or specify 
another size. 


Alpha: Sets the transparency of the Flash track within the QuickTime 
movie, if you have combined a QuickTime movie with a Flash movie. 
A QuickTime movie can contain a separate layer with the Flash movie. 
The Auto option makes the Flash track transparent only if it is on top 
of other tracks. The Alpha-transparent option always makes the Flash 
track transparent. The Copy option makes the Flash track opaque, 
hiding all content behind it. 


Layer: Specifies how the Flash track is layered with the QuickTime con- 
tent. Choose from Auto (Flash track on top if Flash content appears in 
front; otherwise on the bottom), Top (Flash track on top), or Bottom 
(Flash track at the bottom). 


Streaming Sound: Enables you to control how streaming sound is used 
with QuickTime content. Select the Use QuickTime Compression check 
box to export sound to a QuickTime soundtrack. Click Setting to specify 
how the sound is compressed. 


Controller: Creates a control panel to play the movie. Choose None if 
you have created your own controller or don’t want viewers to have any 
control. The Standard option displays the QuickTime controller. The 
QuickTime VR option offers special panoramic and 3D viewing features. 


Playback: Enables you to control movie playback. Select the Loop check 
box to repeat the movie, the Paused At Start check box to let viewers 
use the Controller to start the movie, or the Play Every Frame check box 
to disable skipping frames and sound to maintain timing. 


File: Enables you to determine how files are referenced. The Flatten 
(Make Self-Contained) option combines the Flash movie with imported 
content into a QuickTime movie. If you don’t select the Flatten check 
box, the QuickTime movie references the Macromedia Flash SWF file. 


Creating self-playing movies 

Self-playing movies are called projectors. A projector doesn’t require a sepa- 
rate Macromedia Flash Player and is ideal when you are putting a Flash 
movie on a CD-ROM. To create a projector, select the Windows Projector or 
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the Macintosh Projector check box on the Formats tab of the Publish 
Settings dialog box. Then click the Publish button. The result is a file with an 
. exe extension (for PCs) or an .hqx extension (for Macs). The projector file 
is larger than an SWF file, but users can download it from a Web site and play 
it without needing the Flash Player. 


Exporting movies and images 

Export a movie or image, instead of publishing it, when you need to use it in 
another application. For example, you can export a frame as a GIF file and 
insert it into a PowerPoint presentation. If you already have the HTML code 
and just want to update an SWF file, you can export instead of publish. To 
export a movie, or frame, just follow these steps: 


1. Select the frame you want to export, if you are exporting an image. 

2. Choose FileExport™Export Image or File’Export>Export Movie. 

3. Type a name for the image or movie in the File Name field. 

4. From the Save as Type drop-down list, select a file type. 

5. Click Save. 
A dialog box may appear if the format you choose has settings that you can 
specify. These settings are the same as you have when you publish a file, and 


are explained in the “Generating HTML and Graphics” section, earlier in this 
chapter. You can export the following file types: 


+ 


Adobe Illustrator (.ai) 
Encapsulated PostScript (. eps) 
Drawing Exchange Format (. dxf) 
Windows Bitmap (. bmp) 

Metafile (. emf / .wmf) 
FutureSplash Player (. sp1) 
Graphics Interchange File (. gif) 
Joint Photographic Experts Group (.jpeg/ .jpg) 
QuickTime (. mov) 

PICT Sequence (. pct) 

Portable Network Graphic (. png) 


Video for Windows (. avi) 


+++ 444444 + + + 


Windows Audio (only) (. wav) 


Chapter 8: Getting Interactive 
with ActionScript 


In This Chapter 


Investigating the uses of ActionScript 
Using actions in your movies 
Creating frame actions 


Creating button actions 


Fis documents are fully programmable using the built-in language 
called ActionScript. Before we go any further, let’s be clear: You don’t 
need to be a programmer to use ActionScript. Nonprogrammers can do 

a lot with ActionScript. However, if you are a programmer, you certainly 
have an advantage. In this chapter, we explain how a nonprogrammer uses 
ActionScript. 


Exploring the Role of ActionScript 


Although you can do many interactive tasks without ActionScript, including 
some of those in the following list, ActionScript enables you to control your 
movies. Here are some tasks you can perform with ActionScript: 

+ Create a button to take your viewers to another Web page. 

+ Loop a movie clip through a small range of frames. 


+ Allow your viewers to drag objects on your Web site to new locations. 
(An example would be a site where viewers drag images of furniture 
onto a floor plan to see whether it fits.) 


+ Create a preloader, a short animation that plays while a longer movie 
loads. 


+ Set the properties, such as location and size, of movie clip instances. 
(See Book IV, Chapter 3 for an explanation of movie clips and instances.) 


+ Create an animated mask (a shape that hides everything on the Stage 
except what is just behind the shape). 


+ Play or stop animation. 
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In certain cases, you need to use ActionScript. For example, a button is use- 
less without some ActionScript. You can create wonderful animation with 
no ActionScript at all, but adding ActionScript opens many possibilities 

for interactivity on your Web site, and it’s easy to use after you get some 
practice. 


Because ActionScript tells your movie what action to take, the code is often 
called actions. Adding ActionScript is the same as adding actions. 


ActionScript is very similar to JavaScript, a programming language used on 
Web pages. 


Using Actions in Vour Movies 


Figure 8-1: 
Use the 
Actions 
panel to add 
actions to 
your movies. 





Macromedia Flash 8 offers a wide variety of actions that you can use, the 
basics of which we cover here. You can get more information several ways: 


+ Choose Help™Flash Help and then click the ActionScript 2.0 Language 
Reference. 


+ Take a tutorial by choosing Help™Flash Help and opening Flash 
Tutorials. 


+ Pick up a copy of Macromedia Flash MX ActionScript For Dummies, by 
Doug Sahlin, published by Wiley Publishing, Inc. 


To add actions, you use the Actions panel (choose Window Actions), 
which is shown in Figure 8-1 as it appears when you select a frame. 


Actions list Script pane View options 






Title Bar Expand/Collapse arrow Debugging options 


Insert atarget path | ActionScript Help 
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The Actions panel has the following features: 


+ 


Title Bar Expand/Collapse arrow: Use this arrow at the top left of the 
panel to expand the Actions panel, as shown in Figure 8-1, and to col- 
lapse the Actions panel so that you see only the title bar. 


Actions list: Choose actions and other ActionScript components from 
this list. Underneath the Actions list, a status pane shows exactly where 
you are in your Flash document. 


Script pane: View the ActionScript in this pane. 


Insert a target path: Click this button to open a dialog box where you 
can choose from named instances in the drawing if you need to refer to 
another object. 


Options area: Click one of the three buttons at the top right of the 
Actions panel to set various options in the panel. When clicked, the 
book icon brings up the ActionScript Help in the Help panel. Click the 
stethoscope icon (interesting choice!) to bring up a pop-up menu with 
code debugging options. And finally, click the View Options button to 
add line numbers, see the key commands for ActionScript commands 
in the reference, and invoke the word wrap feature. 


Timeline Control actions 


The first grouping of actions in the Actions panel, which you can open 

by choosing Window™Actions, contains the Timeline Control actions. In 
Macromedia Flash 8, these actions are part of the Global Functions suite of 
ActionScript functions. These actions control the Timeline of a movie, and 
they are the most commonly used functions. You can choose from the fol- 
lowing actions: 


+ 


+ 


+ 
+ 
+ 


gotoAndPlay: This action tells your movie to go to a different frame 
and then continue to play at the new frame. 


gotoAndStop: This action tells your movie to go to a different frame 
and then stops the movie at the new frame. 


nextFrame or prevFrame: This action takes you to the next or previ- 
ous frame, respectively. 


nextScene or prevScene: This action takes you to the next or previ- 
ous scene, respectively, in the scene order. 


play: This action tells a movie to start playing. 
stop: This action stops a movie from playing. 


stopAllSounds: This action stops any sounds from playing. 


All of these actions are case sensitive. So, be sure that you input them prop- 
erly in the Script pane; otherwise, your ActionScript doesn’t work properly. 
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Growser/Network actions 


The Browser/Network category contains actions that connect your movie 
to the world outside it. Here are some of the more common actions in this 
category: 


+ fscommand: This action is an advanced command that enables you to 
control other applications. You can use this command to execute 
JavaScript on the Web page. 


+ getURL: This action creates a hyperlink to another Web page or Web site. 
+ loadMovie: This action loads either a single SWF file or JPEG image. 


+ unloadMovie: This action unloads a loaded movie. 


Movie Clip Control actions 


Movie Clip Control actions control movie clips, of course. Some of the more 
commonly used actions are noted here: 


+ duplicateMovieClip: This action makes a copy of a movie clip. 


+ on: This action defines the mouse event that triggers the action. It is 
used for buttons and is added automatically when you are adding 
ActionScript to a button. 





+ onClipEvent: This action specifies the event that triggers a movie clip 
action. It is inserted automatically when you add an action to a movie 
clip. 





+ removeMovieClip: This action deletes a movie clip, usually one cre- 
ated with the duplicateMovieClip action. 


+ setProperty: This action sets various size, visibility, and position 
properties of a movie clip. 





+ startDrag: This action makes a movie clip draggable on the browser 
screen. You can add this action to a button inside a movie clip so that 
the movie clip responds to the mouse. 





+ stopDrag: This action stops a drag that was started with startDrag. 





+ updateAfterEvent: This action updates the display of a movie clip 
after a specified event, such as dragging. 


Advanced actions 

If you’re ready to do a little programming, you can use many more options. 
For example, ActionScript contains a large number of built-in methods, which 
modify symbol instances. ActionScript programmers create variables that 
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store values, and use them later in the script. You can create code that exe- 
cutes only if and when certain conditions exist. For more information, see 
Macromedia Flash’s ActionScript dictionary, which you can access by choos- 
ing Help~™Flash Help. 


To help you understand what you’ve written, you can (and should) add 
comments that explain what is going on. Comments are lines within the 
ActionScript code that are ignored when the code is processed. To add 
a comment, place two forward slashes (//) before the comment text. 


Here are some basics about how to write ActionScript: 


+ You can use operators such as + and or to calculate values. 


You can use built-in functions to obtain information about objects before 
you change them. 


+ You can change certain properties of objects with setProperty, 
such as 


e Alpha (transparency) 
e Height 

e Height and width 

e Rotation 

e Visibility (yes or no) 
e Xand Y location 


e X and Y scale 


Creating Frame Actions 
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You can add actions to three places: frames, buttons, and movie clips. When 
you add actions to movie clips, you add them to the instance (copy) of the 
movie clip symbol that you insert on the Stage. You can also insert actions 
on the Timeline of movie clips. 


Movie clips have their own Timeline and therefore their own set of frames. 


If you add an action to a frame, the action is executed when the animation 
reaches that frame. For example, if Frame 20 has an action to go to Frame 1, 
when Frame 20 is loaded, the movie jumps to Frame 1. You can use frame 
actions to load a movie clip at a certain frame, to stop a movie from running, 
or to automatically send the user to another URL or another frame. 
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To add an action to a frame, follow these steps: 


1. Create a new layer by right-clicking a layer and selecting Insert Layer 
from the contextual menu. 


A common name for this new layer is Actions. (You can put actions on 
existing layers, but we recommend placing actions on a special layer so 
that you can easily find them.) 


2. Click a keyframe on the new layer. 


Because the action means a change occurs in that frame, you need a 
keyframe. If necessary, insert a keyframe by right-clicking and choosing 
Insert Keyframe from the contextual menu that appears. 


3. If it is not open already, open the Actions panel by choosing 
Window Actions. 


If the panel is open but collapsed, click the Expand/Collapse arrow on 

the Actions panel’s title bar. (Refer to Figure 8-1. Notice that the title bar 

of the Actions panel says Actions - Frame because you have clicked a 
ar keyframe.) 


See Book IV, Chapter 1 for more on managing panels. 


4. To choose an action, click a category (such as Global Functions) and a 
subcategory (such as Timeline Control) from the upper-left pane of 
the Actions panel; then double-click the action you want (or drag it to 
the Script pane). 


If the action needs parameters to specify how it works, you can pass the 
mouse pointer over the ActionScript on the Script pane and see what 
values the ActionScript function can accept. 


5. Type the required parameters in the parameter text fields or choose 
them from the drop-down lists. 


Each action requires different parameters. The appropriate parameters 
for an action appear when the ActionScript is inserted and when 

you highlight a line of ActionScript containing that action. For informa- 
tion about the parameters required for any action, choose Help 

Flash Help™ActionScript 2.0 Language Reference. 


Some parameters display an Expression check box at the right. Select the 
check box if you want the parameter to be considered as an expression, 
which means that the ActionScript can calculate its value. Macromedia Flash 
defines an expression as any combination of ActionScript symbols that repre- 
sent a value. Deselect the check box if you want the parameter to be consid- 
ered literally. (For example, the word “Hello” should be considered literally 
as a string of text.) Also, in many cases, you need to refer to another object, 
such as a movie clip. Click the Insert a Target Path button to get a list of 
appropriate objects. 
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To move the Actions panel out of the way, click the Collapse/Expand arrow 
on its title bar. Press Ctrl+Enter to test your movie and see the result of your 
ActionScript. 


For a detailed list of actions, see the “Using Actions in Your Movies” section, 
earlier in this chapter. 


For example, to add a gotoAndP1ay action that sends the movie from the 
last keyframe to Frame 20 and plays from there, follow these steps: 


1. If Frame 20 is not a keyframe, right-click Frame 20 and choose Insert 
Keyframe. 


2. Click the last keyframe. 


3. Open the Actions panel (choose Window Actions or click the Actions 
panel’s Expand/Collapse arrow). 


4. On the upper-left pane of the Actions panel, click Actions and then 
click Timeline Control. 


5. Double-click gotoAndPlay. 


6. Input either the frame number or the name of the frame and scene 
inside the parentheses. 


If you include the frame number, you just input the number. If you 
include the scene, include the name of the scene followed by a comma, 
followed by a space and the frame. The frame can be either a number or, 
if the frame has a label, the label name. In this example, you type 20 
between the parentheses. 


7. Test the movie (press Ctrl+Enter) to check that it goes from the last 
keyframe to Frame 20. 


Creating Gutton Actions 


Buttons are your key to interactivity on your Web site. Buttons are especially 
attuned to the actions of the mouse. You can add ActionScript to a button that 
executes an action when the user passes the mouse pointer over the button or 
clicks it. For information on creating buttons, see Book IV, Chapter 3. 


To add an action to a button, follow these steps: 


1. Create the button, or if you created the button earlier, drag an 
instance from the Library onto the Stage. 


2. Select the button and open the Actions panel, if it is not already open, 
by choosing Window Actions. 
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If the panel is open but collapsed, click the Expand/Collapse arrow on 
the Actions panel’s title bar. (Notice that the title bar of the Actions 
panel says Actions - Button because you have selected a button.) 


. From the upper-left pane of the Actions panel, choose a category (such 


as Global Functions) and subcategory (such as Browser/Network); then 
double-click an action (such as get URL). 


The getURL action sends the user to the URL that you specify. You can 
also drag the action from the Actions list to the Script pane by using the 
Selection tool. 


. If the action requires parameters, click the line of code that contains 


the action itself and enter the necessary information in the parameter 
text fields. 


For more information about the parameters required by each action, 
consult the ActionScript dictionary. Choose Help™Flash Help. 


To add an action to a button, you need to specify what type of mouse action 
activates the ActionScript. Because the mouse option determines when the 
action takes place (such as when the mouse button is released), it is called 
an event. You can choose from the following button events: 


+ 
+ 


Press: The action is executed when the viewer clicks the mouse button. 


Release: The action is executed when the viewer releases the mouse 
button. This is the most commonly used button event, because the 
release of the mouse button means that the viewer has completed the 
click. 


Release Outside: The action is executed when the viewer releases the 
mouse button outside the hit area. 


Key Press: The action is executed when the viewer presses the specified 
key. Use this event in addition to a mouse event to enable viewers to use 
the keyboard instead of the mouse. A commonly used key is the Enter key. 


Roll Over: The action is executed when the viewer passes the mouse 
cursor over the button’s hit area but doesn’t click. 


Roll Out: The action is executed when the viewer leaves the hit area. 


Drag Over: The action is executed when the viewer passes the mouse 
cursor over the button’s hit area while holding down the mouse button. 


Drag Out: The action is executed when the viewer leaves the hit area 
while holding down the mouse button. 


Creating Button Actions 455 


As an example, to add a get URL action to a button that functions when the 
button is clicked, follow these steps: 


1. 


D 


Create the button. 


For instructions, see Book IV, Chapter 3. 


. From the Library (choose Window® Library), drag an instance of the 


button onto the Stage. 


The button should have a border around it, indicating that it is selected. 


. Open the Actions panel (choose Window™ Actions or click the Actions 


panel’s Expand/Collapse arrow). 


The Actions panel should say Button on its title bar. If it doesn’t, click 
the button again. 


. From the upper-left pane of the Actions panel, click Actions and then 


click Browser/Network. Double-click get URL. 
Your code in the Script pane should look like this: 
getURL(); 


In the Script pane, enter the URL you’ve chosen inside quotation 
marks. 


If the URL is within a Web site, it can be local, meaning that you don’t 
need http: //. If you want the button to send viewers to another site, 
you need the full URL, including the http: //. 


To specify a target window for the URL, add it after the URL in the 
getURL function as displayed in the Script pane. 


These same options are used with the <A> tag in HTML: 
e _self: Opens the URL in the same window 
e _blank: Opens the URL in a new window 


e _parent: Opens the URL where the inner file was located when 
frames are used and one file is nested inside another 


e _top: Loads the URL in the topmost frame and the new page fills the 
entire window when frames are used 


If you want to load a new window, and your URL is www. somesite.com, 
the resulting ActionScript looks like the following: 


getURL ("http://www.somesite.com", "blank"); 


Even though Flash doesn’t add the quotation marks in for you when you 
add the get URL function to the Script pane, you need quotation marks 
around both the URL and the target. 
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7. Add the appropriate button code around the get URL function. 


As noted previously, you have several button event options. To call the 
URL when the button is pressed, you add the following code around the 
getURL function: 


on (Press) { 
getURL("http://www.somesite.com", "_blank") ; 
} 


8. Choose Control™Test Movie and click the button to check whether the 
getURL action works. 


If you use a local URL, the button doesn’t work unless the movie is pub- 
lished and uploaded to the domain for that URL. 


Chapter 9: Creating Interfaces 
with Components and Forms 


In This Chapter 


Inserting components 


Building forms 


M acromedia Flash 8 is not limited to creating animation. You can use 
Macromedia Flash to develop an entire interface, including buttons, 
menus, forms, scroll bars, and more. Macromedia Flash includes a set of 
interface elements called components that you can use to efficiently add 
interfaces and interactivity to your Web site. In this chapter, we show how 
you can use components and create forms with Macromedia Flash. 


Macromedia Flash can create very innovative interfaces. As long as you 
keep your Macromedia Flash interfaces user-friendly and easy to under- 
stand, your viewers will appreciate the new look and feel. Scroll bars cre- 
ated with Macromedia Flash are a lot cooler than the ones created in most 
professional programs because you can customize how they look and func- 
tion. Creating scroll bars and other interface elements for your Web page 
with Macromedia Flash may actually be easier than with other, more com- 
plex programming environments. Some of these techniques, however, 
require a bit of ActionScript programming to make them fully functional. 


Components are actually movie clip symbols that contain a set of defined 
parameters and properties. (For an explanation of movie clip symbols, see 
Book IV, Chapter 3.) You can specify the values of these parameters and 
properties when you create your Flash document. Using these components 
ensures that your interface items work together and in a similar manner. 
Because of the programming that has been done in advance to create the 
parameters and properties, you need to do less programming for each Flash 
document you create. 


You can customize the appearance of components to match the rest of your 
Web site’s style. If you know some ActionScript, you can even create your 
own components, and you can find components that Flash developers have 
created on Flash resource Web sites. 
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Adding Components 


A component can be as simple as a check box or as complex as an entire 
graphical user interface. The following list represents the basic set of com- 
ponents included in Macromedia Flash 8. (You can find them in the User 
Interface section of the Components panel.) 


+ 


+ 
+ 


+ 


Radio buttons: Radio buttons are small round buttons. Users can select 
one choice from several options. 


Check boxes: Users can select or deselect each check box. 


Push buttons: Clicking a button makes something happen, like a button 
symbol in Macromedia Flash. (See Book IV, Chapter 3 for more informa- 
tion on working with buttons.) 


Combo boxes: Combo boxes provide drop-down lists. 
List boxes: List boxes enable you to offer users a scrolling list of choices. 


Scroll panes: Scroll panes enable you to create scrollable windows for 
movie clips. 


Label: A label is a simple one-line text descriptor that accompanies a 
field. 


Loader: A loader loads a movie or a graphic file into memory. 


ProgressBar: This handy component shows your viewers a growing per- 
centage bar that represents the progress of a file being loaded. 


TextArea: This multiline text area can accept text inputs. 


TextInput: Unlike the multiline text area, the TextInput is a single line of 
text. 


Numeric Stepper: This handy component is great for drop-down-like 
lists. Use it to make lists of numbers that can be incremented or decre- 
mented depending on the keystroke. 


Window: The Window component creates a window within your Flash 
movie. This window can have a specific size, as well as header text and 
even a Close button. 


The procedure for working with a component is similar for all the compo- 
nents. However, individual items vary. The general procedure is as follows: 


1. 


2. 
3. 


Open the Components panel by choosing Window~>Components. 
The Components panel is shown in Figure 9-1. 
Drag one of the components onto the Stage. 


With the component still selected, open the Properties panel, if it isn’t 
open already, by choosing Window™Properties. 





Figure 9-1: 
The 
Components 
panel 
contains 
interactive 
components. 








Figure 9-2: 
The 
Properties 
panel when 
a radio 
button 
component 
is selected. 
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If the Properties panel is open but collapsed, click the Expand/Collapse 
arrow on its title bar. 


> 


Click the Parameters tab. 


The Properties panel with the Parameters tab displayed is shown in 
Figure 9-2. 


a 


In the Instance Name text field of the Properties panel, type an 
instance name. 
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Remember that an instance is a single iteration of a symbol. By naming 
each instance of the component, you can refer to it in your ActionScript. 


6. Set the parameters for the component in the Properties panel by click- 
ing each parameter and entering the value in the field to its right. 


Repeat this procedure with all the components. The individual requirements 
of the components are listed in the next several sections. 


Use the Align panel, which you access by choosing Window®Align, to line up 
and evenly distribute a series of components, such as radio buttons or 
check boxes. 


You can resize components using the Free Transform tool, but they are not 
all infinitely flexible. For example, you can change the width of a check box, 
but not its height. 


Check boxes 


The CheckBox component allows users to select one or more choices from a 
list. Each item on the list has a small box next to it that has a check inside 
when the user clicks the box. The CheckBox component has the following 
parameters: 


+ Label: This parameter determines the text that is attached to the 
component. 


+ LabelPlacement: This parameter places the text relative to the rest of 
the component. You can choose Left or Right. 


+ Selected: This parameter, when set to true, shows that your check box 
is already selected when the page is first viewed. 


Radio buttons 


Radio buttons are like check boxes, except that users can select only one 
at a time in any group of radio buttons. When a radio button is selected, it 
has a dot inside its circle. The RadioButton component has the following 
parameters: 


+ Label: This parameter determines the text that is attached to the 
component. 


+ Selected: This initial state parameter determines if a radio button is ini- 
tially selected. 


+ Group Name: This parameter enables you to create independent groups 
of radio buttons. Say that you want to poll your users to see whether 
they like to swim and like to run. You want a Yes or a No for each. To 
create such groups of radio buttons, enter a Group Name parameter. 





Figure 9-3: 
A combo 
box is a 
scrollable 
list. 
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Users can select one radio button in each group. For example, if you 
have four radio buttons, you can put two into a group named Swim and 
two into a group named Run. You can then label buttons Yes and No in 
each group and ask users “Do you like to swim?” for the buttons in the 
Swim group and “Do you like to run?” for the buttons in the Run group. 
Users can then answer Yes or No to each question. 


+ Data: The Data parameter stores data related to a button. For example, if 
you want to know whether a user selected the radio button named Yes, 
you can put Yes in the Data field and use ActionScript to execute an 
action (perhaps go to a specific Web page) if a user selected the Yes 
radio button. 


+ LabelPlacement: This parameter places the text relative to the rest of 
the component. 


Push buttons 


Push buttons are similar to the buttons you create in Macromedia Flash. The 
main reason to use push button components is to create a consistent look 
with other components. However, the included parameters may make them 
quicker to use and require less code. They have a Label parameter that 
places text on the button and a Click Handler that uses a function you write 
to specify what happens when a user clicks the button. 


Combo boxes 
A combo box is a menu list of items with a scroll bar to its right. Users can 
scroll through the list of items and choose one, as shown in Figure 9-3. 





Where do you live? 














Like radio buttons, combo boxes have change handler and data parameters. 
You add the labels for the list items in the Values dialog box as follows: 


1. With the combo box selected, open the Properties panel, if it isn’t 
open already, by choosing Window™Properties. Alternatively, click 
the Expand/Collapse arrow on the Properties panel’s title bar. 


2. Click the Label row in the Parameter list and then click the right side 
of the row to open the Values dialog box. 


The Values dialog box is shown in Figure 9-4. 
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Figure 9-4: 
Use the 
Values 
dialog box 
to enter 
labels for a 
combo box. 
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3. To add a new list item, click the plus (+) sign and type the label. 
You can click any label to edit it. 
4. When you're done, click OK. 


The Editable parameter in the Parameter list specifies whether the combo box 
is editable. If this parameter is set to true, users can enter text to search for a 
matching item. If it is set to false, users can only select an item. 


The Row Count parameter in the Parameter list determines how many items 
must be in the combo box before the scroll bar is displayed. The default is 
eight items. 


List boxes 


A list box is like a combo box, except that (unlike a combo box) users cannot 
edit it, and they can select multiple items. To allow this capability, set the 
Select Multiple parameter to true. You add the labels as described in the 
“Combo boxes” section. 


Scroll panes 

Scroll panes are rather unusual. They allow you to put movie clips (and 
only movie clips) inside a scrollable pane. The advantage is to display large 
movies or images without taking up a lot of space, as shown in Figure 9-5. 
No programming is necessary. The movie clip must be in the Library, but it 
doesn’t need to be on the Stage. 


You can load JPG images into a scroll pane by using ActionScript. 


You also need to give the movie clip the Export for ActionScript option in the 
Linkage Properties dialog box, as follows: 


1. Open the Library by choosing Window™Library and then right-click 
the movie clip and choose Linkage from the contextual menu. 


The Linkage Properties dialog box opens. 


Figure 9-5: 


A scroll 
pane allows 
you to 
display a 
movie clip in 
a very small 
space. 








Adding Components 463 





2. In the Identifier text field, enter a linkage name for the movie clip. 
Usually, the linkage name is the name of the movie clip. 


3. Select the Export for ActionScript option. Also, make sure the Export 
in First Frame option is selected. 


4. Click OK. 


Select the scroll pane and display the Properties panel. The ScrollPane com- 
ponent has the following parameters: 


+ Scroll Content: In the contentpath area, enter the linkage name of the 
movie clip. 


+ Horizontal Scroll: Using the three available parameters — hlinescroll- 
size, hpagescrollsize, and hscrollpolicy — you can set the horizontal 
scroll options. Use hscrollpolicy to turn horizontal scrolling on and off 
and then use hlinescrollsize and hpagescrollsize to set the amount of 
movement for the horizontal line and for the pane overall. 


+ Vertical Scroll: Using the three available parameters — vlinescrollsize, 
vpagescrollsize, and vscrollpolicy — you can set the vertical scroll 
options. Use vscrollpolicy to turn vertical scrolling on and off and then 
use vlinescrollsize and vpagescrollsize to set the amount of movement 
for the vertical line and for the pane overall. 


+ Drag Content: Set the ScrollDrag parameter to true to allow users to 
drag the movie clip (pan it) to see the hidden portion without using the 
scroll bars. (The default is false.) 


Label 


The Label component is perhaps the simplest of the components, in that it is 
not dynamic in any way. It is simply a label for another form element. That 
said, some settings can be applied to a label. You can align the text within 
the label by selecting an autoSize option. You can also specify whether the 
label will be HTML text by selecting true or false from the HTML option. 
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Loader 


The Loader component allows you to load an SWF movie or a JPEG within a 
Flash movie, effectively allowing you to play a movie within a movie. You can 
specify only a few options for this component: 


+ Set autoload to true to let Flash load the movie for you in the keyframe 
where the movie begins. 


+ Provide a path to the SWF or JPEG file to be loaded using the 
contentPath field. 


+ Allow the movie to be scaled up or down by setting the scaleContent 
property to true. 


When you render the movie, Flash renders not only your movie, but the one 
you’ve pointed to with the Loader component. 


TextArea 

The TextArea component creates, as you might expect, a text area on the 
screen. Four simple options apply to this component. To take advantage of 
this component, simply drag an instance of it from the Components panel 
onto the Stage. Here’s what you can specify using parameters in the 
Properties panel: 


+ Make the text box editable (meaning you can type in it on-screen) by 
selecting true from the Editable property field. 


+ If you want the box to be in HTML format, select true from the HTML 
property field. For ease of use, you probably want to keep this property 
set to false. 


+ If you want the field to be prefilled with text, input some text in the Text 
property field. 


+ Finally, if you want to use word wrap, be sure to select true in the 
wordWrap property field. 


TextInput 

Much like the TextArea component, the TextInput component allows viewers 
to input text on the screen. Again, you add it to your document by dragging 
an instance of it from the Components panel onto the Stage. In the 
Properties panel, you can set the following parameters: 


+ Make the text box editable (meaning you can type in it on-screen) by 
selecting true from the Editable property field. 
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+ If you want the text field to be a password field, meaning only **** 
shows up instead of characters, select true from the Password prop- 
erty field. The default value is true. 


+ If you want the field to be prefilled with text, input some text in the Text 
property field. 


NumericStepper 


The NumericStepper can be a handy component when you have lists that 
have incremental numeric values in them. Essentially, this component cre- 
ates a list that you can cycle either up or down by using arrows. To use a 
NumericStepper, simply drag it from the Components panel onto the Stage. 
There, you can specify the following through the Properties panel: 


+ To set the maximum value of the NumericStepper, input an integer in the 
Maximum property field. 


+ To set the minimum value of the NumericStepper, input an integer in the 
Minimum property field. 


+ Input an integer in the StepSize property field. It determines how big the 
increments are from step to step. 


+ In the Value property field, input the initial value of the NumericStepper. 


Window 


Another interesting tool for adding some cool interactivity to your interface 
is the Window component. This component adds a window to your Flash 
movie. This feature can be useful if you’re zooming in or loading a picture in 
your movie. You create a window by dragging it from the Components panel 
onto the Stage. Then you can specify the following: 


+ If you want to be able to close the window, select true from the 
CloseButton property field. 


+ To load a picture into the window, provide a path to the image in the 
contentPath property field. 


+ If you want the window to have a text title, enter it in the Title property 
field. 


Setting component properties 

You can set the color and text properties of a component by using 
ActionScript. You can also globally set properties of all the components in 
your movie. Finally, you can create skins, graphic elements that affect how 
components look. These methods are beyond the scope of this book. For 
more information, see Flash Help. 
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Creating Forms with Macromedia Flash 


You can create forms that users can complete online. You can capture the 
information that users input into the forms and either use it elsewhere on 
your site or send it to a server and place it in a database. Forms are a great 
way to collect data about your users. 


Collecting data within a Flash movie 


You can collect data within a Flash movie to personalize the site. For exam- 
ple, if a user enters a name (Joe) and favorite book genre (science fiction), 
you can send the user to a page (or Flash frame) that incorporates the user’s 
input, such as a page with the message shown in Figure 9-6. 








Firstname: Joe | 





Favorite book genre: science fiction 








Figure 9-6: 

This Flash 

form stores Hello, Joe 

the user's 

name and We will send you a list of our books in the 


i following genre. Thanks for your interest! 
interest and sl y 


responds science fiction 
based on 
the results. 








Creating this type of form requires some ActionScript. In general, advanced 
ActionScript is not covered in this book, but here we give you the 
ActionScript needed to accomplish this form. 


To create this form, start a new movie and follow these steps: 
1. Use the Text tool to create the labels (such as First Name and Favorite 


Book Genre) on a separate layer, using the default static text. 


You set the type of text in the Text Type drop-down list of the 
Properties panel. 


2. Next to each text label you just entered, create a new text field by 
dragging the TextInput component from the Components panel. 
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3. For each text field, choose an instance name and enter it in the 
Instance Name text field of the Properties panel. 


We use the instance names firstname and favorite; these names are 


used later in the ActionScript. 


4. Use the Components panel to drag a push button onto the Stage. 


5. In the Properties panel, type a label for the button, such as Done, and 
change the Click Handler to Done. 


The Click Handler, Done, is used in the ActionScript as a function to tell 
Macromedia Flash what to do when the button is clicked. Your screen 
should be similar to the top image in Figure 9-6. 


6. Insert a new keyframe in Frame 2 of all the layers. 


7. On the text layer of Frame 2, rearrange the text fields, as in the 
bottom image of Figure 9-6. 


These text fields should have the same instance names as they did in 


Frame 1. 


8. Select each of the text fields with instance names and change their 
text type to Dynamic from the Text Type drop-down list of the 


Properties panel. 


Dynamic text comes from another location and is dynamically placed 
into the SWF file when viewed. In this case, viewers input text in Frame 
1, and the text they input is inserted into the dynamic text fields in 


Frame 2. 


9. Open the Actions panel by choosing Window™ Actions or by simply 


pressing the F9 key. 


10. Add a new layer and name it Actions. 


11. Click Frame 1 of the Actions layer and type the following in the Script 


pane of the Actions panel: 


stop(); 


this.firstname.text = ""; 


this.favorite.text = 


function done() { 
_global .myName 
_global.myFave 
gotoAndStop (2); 





}; 


nn, 
, 


this.firstname.text; 
this.favorite.text; 


This ActionScript stops the animation on Frame 1 so that nothing hap- 
pens until the viewer clicks Done. The next two lines reference the text 
fields on the current Timeline (using “this”) to empty the two text fields 
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in case they already contain text. The function, Done, creates two vari- 
ables — myName and myFave — and sets them equal to the text in the 
firstname and favorite input text fields. These variables are global, so 
you can use them again in Frame 2. Finally, the ActionScript moves the 
playhead to Frame 2 and stops there. 


12. Click Frame 2 of the Actions layer and type the following in the Script 
pane of the Actions panel: 


stop(); 
this.firstname.text = myName; 
this.favorite.text = myFave; 


This code stops the animation and sets the two dynamic text fields in 
Frame 2 to the global variables you created in Frame 1. As a result, the 
text that viewers input in Frame 1 appears here in Frame 2. 


13. Choose Control=Test Movie to see how the form works. 


14. Fill in the form and click the Done button. 


As you can see, although this form requires some ActionScript, it doesn’t 
require very much. You can modify this ActionScript for your own needs. 


The form created in this example is very simple. You can add many other 
features, such as a Thank You page and form validation. 


Posting form data 


In the example in Figure 9-6, you may have wondered how you would know 
to send the user the list of books. To accomplish this task, you need to post 
the data from the form to a Web server. You also post data when you want to 
collect visitors’ names, e-mail addresses, and so on, to create a database of 
visitors. 


Posting form data is complex because you need a script (often a CGI script, 
but there are several kinds) on the server to manage the data. The script 
sets the requirement for the format of the data you send. 


As with HTML forms, you specify a method of sending the information (get or 
post are the only two options) and a URL. You can use the loadVariables 
function to load variables to a CGI script. Here is an example: 


loadVariables("http://www.website.com/cgi-bin/scriptname.cgi", "", "POST") 


For more information, choose Help™Flash Help and look up the 
loadVariables or loadVars functions. 


Chapter 10: Integrating 
Macromedia Flash 8 with 
Other Macromedia Products 


In This Chapter 


Integrating Macromedia Flash with Fireworks 
Integrating Macromedia Flash with Dreamweaver 
Integrating Macromedia Flash with FreeHand 


Integrating Macromedia Flash with ColdFusion 


A ll the Macromedia Studio 8 and Macromedia MX products covered 
in this book are extremely useful for creating Web sites. If you are 
responsible for an entire site — content, art, interface, and server-side 
programming — you can bring the capabilities of the entire Macromedia 
Studio suite to bear on your site. 


The integrated interface means that the programs look and work similarly. 
For example, the Properties panel basically serves the same purpose in 
Fireworks 8, Dreamweaver 8, FreeHand MX, and Macromedia Flash 8. 


In addition to similar interfaces, the programs also share common tool 
icons. When you look for the Pen tool in Macromedia Flash, it looks the 
same as the Pen tool in FreeHand and Fireworks. Nope, sorry, you won’t 
find a Pen tool in Dreamweaver; it has only WYSIWYG (What You See Is 
What You Get) tools for inserting graphic objects. 


Integrating Macromedia Flash with Fireworks 


Macromedia Fireworks is a full-featured Web graphics program. Its native 
format is PNG, which is a bitmap file format. Fireworks can also work 
with vector images. You can export Fireworks vector and bitmap images 
to Macromedia Flash’s SWF movie format and then import them into 
Macromedia Flash. 


You can also use the quick export feature to copy an object from Fireworks 
to the system Clipboard and then paste it into Macromedia Flash, or you can 
export selected objects as SWF files. SWF files are generically referred to as 
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Flash movies. You activate the Quick Export feature by clicking the Quick 
Export icon in the upper-right corner of the Fireworks Document window. 


Importing a Fireworks PNG into Macromedia Flash 


You can import both PNG files and the SWF files created in Fireworks into 
Macromedia Flash by choosing File>Import™Import to Stage. When you 
import a Fireworks PNG file into a Flash document, you have a tremendous 
amount of latitude. You can choose to import the file as a movie clip and 
retain layers, maintain paths as editable objects, and maintain text as 
editable. Additionally, you can decide to flatten the PNG file into a single 
bitmap. 


If you import a graphic from Fireworks, you can start the editing process 
from within Macromedia Flash. Select the graphic and click Edit in the 
Properties panel (choose Window™Properties). Macromedia Flash opens 
Fireworks, where you can edit the image. In fact, you can even use the spiffy 
Editing from Flash icon, in case you go on an extended break and, when you 
return, you forget what you were doing. 


If you import the PNG file into Macromedia Flash and flatten it to a single 
bitmap, when you edit the file from within Macromedia Flash, Fireworks 
opens the original PNG file. You can then edit every object to your heart’s 
content. When you’re done editing, click the Done button, and Fireworks 
updates the image in Macromedia Flash. It’s known as roundtrip editing. Now 
is that cool or what? Figure 10-1 shows a PNG file being edited in Fireworks. 
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Some software is horribly invasive. If you install other software after you 
install the Macromedia Studio suite, this software may declare itself as the 
default editor for PNG files. If this happens, you may have to use your oper- 
ating system to change the associated program for PNG files to Fireworks or 
reinstall the Macromedia Studio suite. If one of these alternatives is not feasi- 
ble, you have to choose the Edit With option in Macromedia Flash and navi- 
gate to the Fireworks. exe file. 


As with other Macromedia products, the interface for Fireworks is similar to 
the one you know in Macromedia Flash. So, when you’re roundtrip editing, 
you don’t have to learn a new toolset or anything. You have similar tools, sim- 
ilar panels, and the familiar Properties panel, for example. The similar inter- 
face makes it easy to switch between programs without getting confused. 


Cutting and pasting between Macromedia 
Flash and Fireworks 


Another option is to cut and paste between Macromedia Flash and Fireworks. 
If you’re creating a graphic symbol in Macromedia Flash and it’s just not 
working out, you can use the graphic tools in Fireworks to smooth out the 
lumps in your graphic. Just follow these steps: 

1. Choose Edit™Cut. 

Macromedia Flash cuts the object to your system Clipboard. 
2. Launch Fireworks. 
3. Choose File>New. 


Because Fireworks is so smart, it knows how big the object you cut from 
Macromedia Flash is, and the new document is just the right size. 


4. Choose Edit™Paste. 
Fireworks pastes the object into the new document. 
5. Edit the object in Fireworks. 


You can use the Fireworks editing tools to modify the object you cut 
from Macromedia Flash, add objects, and even add layers. However, 
make sure you have everything where you want it, because when you 
select everything in Fireworks and then cut and paste it back into 
Macromedia Flash, the objects you added are flattened and cannot be 
edited. The better solution is to follow Step 6 onward. 


6. After you finish editing in Fireworks, choose File Save. 
The Save dialog box opens. 


7. Enter a name for the file and navigate to the folder where you want to 
save the file. 


Fireworks saves the file in its native PNG format. 
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8. Exit Fireworks. 
9. In Macromedia Flash, choose File>Import™Import to Stage. 
The Import dialog box appears. 
10. Select the file you just saved in Fireworks and click the Open button. 
The Fireworks PNG Import Settings dialog box opens. 


11. Choose the settings that best suit the Flash document you’re 
working on. 


If you want the ability to edit individual objects from the Fireworks file in 
Macromedia Flash, make sure you don’t flatten the image. Import the file 
as a movie clip and retain layers. If you were editing a symbol when you 
cut the object from Macromedia Flash, select the Import into New Layer 
in Current Scene option. Macromedia Flash imports the PNG file into the 
symbol you’re editing and retains each object from the Fireworks PNG 
file as individual objects. You can now move individual objects as 
needed or create additional layers for the objects. 


Integrating Macromedia Flash with Dreamweaver 


The Dreamweaver interface is also similar to the Macromedia Flash inter- 
face, with bunches of panels — including the ever-present Properties panel. 
You can use Dreamweaver to create HTML code that holds your SWF files. 
Inserting SWF files into Dreamweaver Web pages is easy: Just click the Flash 
icon on the Common or Media categories of the Insert bar. You can also use 
Dreamweaver to generate Flash buttons for use in HTML and CFML pages. 


You can open, create, edit, and optimize Macromedia Flash files directly from 
Dreamweaver. Finally, Dreamweaver now supports ActionScript editing. You 
can create server-side ActionScript in Dreamweaver and save a document as 
a Macromedia Flash AS (ActionScript), ASR (ActionScript Remote), or ASC 
(ActionScript Communication) file. 


When you have a Macromedia Flash file in a Dreamweaver document and 
it’s not up to snuff, you don’t have to exit Dreamweaver and reopen the 
original FLA file, edit it, and then publish the file again. That would be way 
too much work. In fact, we’re exhausted from just typing the last few sen- 
tences. Fortunately, there’s a much simpler way. When you’re working on 
a Dreamweaver HTML file that has an SWF movie embedded within it, you 
can edit the Macromedia Flash file by following these steps: 


1. Select the Macromedia Flash file in the Dreamweaver HTML document. 


The file is the gray rectangle with an F emblazed on it. Note that you 
must be working in Design or Code and Design (Split) view to select the 
file this way. 
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2. Open the Properties panel. 


For more information on the Dreamweaver Properties panel, see Book II, 
Chapter 1. 


3. Click the Edit button. 


Dreamweaver launches Macromedia Flash, and the Locate Macromedia 
Flash Document File dialog box appears. 


4. Navigate to the folder where the native FLA file that you published 
the SWF movie from is stored. 


5. Select the appropriate file and click the Open button. 


The native FLA file that you published the Flash movie as opens in 
Macromedia Flash, and lo and behold, an icon that says Editing from 
Dreamweaver appears. 


6. Edit the file in Macromedia Flash as needed. 
7. After editing the file, click the Done button. 


This action publishes the movie again and updates the file in 
Dreamweaver. Before exiting, you may want to choose Control™Test 
Movie to make sure all is in order. 


That’s roundtrip editing from Dreamweaver to Macromedia Flash. Too cool. 


Integrating Macromedia Flash with FreeHand 


Although at one time FreeHand was used mostly to create graphics for 
printed media, such as magazines, it now has many features that are valu- 
able for Web site use. FreeHand can create complex vector graphics beyond 
anything you can create with Macromedia Flash. You can easily import 
FreeHand graphics into Macromedia Flash by choosing File™Import. 


When you import FreeHand graphics, you have a great deal of control over 
the way graphics appear in Macromedia Flash. You can do the following: 


+ Assign pages of FreeHand documents to Macromedia Flash scenes or 
keyframes. 


+ Assign FreeHand layers to Macromedia Flash layers or keyframes, or 
choose to import the entire FreeHand graphic as one layer (flattened). 


+ Convert lens fills (for example, Magnify and Transparency) to 
Macromedia Flash equivalents. 


+ Import symbols from the FreeHand Library directly into your 
Macromedia Flash Library. 
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You can use the Flash Navigation panel in FreeHand to test SWF files before 
you export them to Macromedia Flash. FreeHand has an anti-alias display 
mode that uses Macromedia Flash’s anti-alias feature to show you how your 
FreeHand artwork will look in Macromedia Flash. You can apply hyperlinks 
and Flash actions to graphics and text from within FreeHand. 


FreeHand’s animation feature means that you can create animations in 
FreeHand and use them in Macromedia Flash. This feature enables you to 
use the FreeHand vector drawing tools to create a character, bring it to life 
in FreeHand, and then export it as a Flash file. After all, vector illustrations 
are FreeHand’s claim to fame. 


You can export FreeHand documents as SWF files. Furthermore, you can view 
FreeHand documents as temporary SWF files, a process similar to choosing 
ControlTest Movie in Macromedia Flash. FreeHand opens a Macromedia 
Flash Player window, and you can see how your FreeHand document will look 
as an SWF file. 


When you create files in FreeHand with the intention of using them in Flash 
documents, make sure you use the RGB color model. (See Book VI, Chapter 6 
for more details about color management in FreeHand.) FreeHand files cre- 
ated with the CMYK color model are converted to RGB when you import 
them into Macromedia Flash. Macromedia Flash generally does a pretty good 
job of making the transformation, but if you’re a stickler for detail and want 
what you see in FreeHand to be what you get in Macromedia Flash, stick with 
the RGB color model when choosing colors for fills and strokes. 


In spite of the fact that FreeHand and Macromedia Flash are distant cousins, 
if you try to copy an object from Macromedia Flash with the hope of pasting 
it into FreeHand for some hands-on editing, you can paste the file just fine, 
but all you can edit is the stroke of the object you created in Macromedia 
Flash. The fill acts just like a bitmap and refuses to yield to the FreeHand 
editing tools. 


Integrating Macromedia Flash with ColdFusion 


When you need to coordinate Flash applications with server-side ActionScript 
code, you use ColdFusion. ColdFusion supports server-side ActionScript that 
you can use to create your Macromedia Flash Remoting applications, making 
it easier to program both sides of the equation (server-side and client-side) in 
one programming language. Server-side ActionScript is a document stored in a 
directory at the Web server, as opposed to ActionScript in the Flash movie. 
These features are available to Web developers who use Macromedia Flash 8. 
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Integrating Macromedia Flash with 
other Macromedia products 


Macromedia also has two other Flash-related 
products that you should know about: 
Macromedia Flash Communication Server MX 
and Macromedia Flash Remoting MX. These 
products are for advanced users who want to 
build communications applications in Macro- 
media Flash and integrate Macromedia Flash 
with applications built in ColdFusion or other 
server-side systems. 


Macromedia Flash Communication Server MX 


Macromedia Flash Communication Server is a 
new Macromedia program that enables pro- 
grammers to develop communications applica- 
tions for Web sites. Some of the possibilities 
include the following: 


Video teleconferencing 

Video broadcasting for presentations 
Audio messaging 

1#” Text messaging 

Live chat rooms 

Polling 

1# White boards 

Message boards (discussion groups) 


To write the programming code, you can use 
Dreamweaver to create server-side Action- 
Script. A number of prebuilt components are 
available as downloads from Macromedia's 
Web site to make it easy to create communica- 
tions applications. For further information, go to 
the following URL: 


www.macromedia.com/software/ 
flashcom 


If the previous paragraphs have piqued your 
interest, you may want to consider downloading 
the trial version of Macromedia Flash 
Communication Server. After you download the 
trial version and install it, you can peruse sample 
applications that Macromedia has already cre- 
ated for you. If you have a Web cam hooked up 
to your computer, you can test the video capa- 
bilities of Macromedia Flash Communication 
Server. The Macromedia Flash Player acts as 
the conduit between your Web camera and the 
Macromedia Flash Communication Server. You 
can download the trial version of Macromedia 
Flash Communication Server at this URL: 


www.macromedia.com/software/ 
flashcom/download/ 
components/license.html 


Macromedia has created some ready-built 
Macromedia Flash Communication Server com- 
ponents. The ActionScript in these babies is 
longer than most short stories, but don’t fret; you 
don’t have to write it. Macromedia Flash geeks 
have already done that for you. After you down- 
load the Macromedia Flash Communication 
Server components and install them, you have a 
new sub-group in the Components panel called 
Communications Components, as shown in the 
following figure. Instead of creating the graphics 
and ActionScript (which is very complicated), 
you can just drag one of these components from 
the Components panel into your Flash applica- 
tion, and you're good to go. You can download 
the Macromedia Flash Communication Server 
MX components at this URL: 


www.macromedia.com/software/ 
flashcom/download/ 
components/index.html 


(continued) 
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Macromedia Flash Remoting MX 

Macromedia Flash Remoting offers tools for pro- 
grammers to connect Macromedia Flash with a 
Web server application built with ColdFusion, 
.NET, or Java. You can integrate Macromedia 
Flash with databases and Web services by using 
special ActionScript commands. You can use 
your elegant Macromedia Flash artwork as the 
interface to display data from databases. For 
more information, go to the following URL: 


www.macromedia.com/software/ 
flashremoting 


Macromedia Flash Remoting is an excellent tool 
you can use to create dynamic Flash applica- 
tions. For example, if you want to create a Flash 
application that displays a slide show, you can 
use the Flash ListBox or ComboBox component 
and create a function to populate the ListBox or 
ComboBox with the titles and filenames of the 
images you want to load. The downside is that if 
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you need to change the images, you have to edit 
the Flash movie and enter new values in the 
ListBox or ComboBox. However, if you use 
Macromedia Flash Remoting, you can access a 
database that stores the titles and filenames of 
the images and load them into the Flash appli- 
cation through a ColdFusion component you 
created in Dreamweaver. The ColdFusion 
Component (or CFC as the ColdFusion geeks 
refer to it) is the conduit between your Flash 
application and the database. If you've dabbled 
in ColdFusion and feel comfortable with 
ActionScript, this is your ticket to creating 
dynamic Flash applications. A cool Flash inter- 
face with Macromedia Flash Remoting and the 
odd ColdFusion Component or four adds up to 
something very special. 


Macromedia Flash Remoting can be accom- 
plished with any server that has ColdFusion 
installed. But the first step is to download the 
Macromedia Flash Remoting MX Components 
you find at this URL: 


www.macromedia.com/software/ 
flashremoting/downloads/ 
components 


After you download and install the components, 
you may be a bit disappointed, because there are 
no new components installed in Macromedia 
Flash. That's true, but a whole lot of actions are 
added to the Actions panel that you find in the 
Remoting book, as shown in the following figure. 
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Another plus when you use the Macromedia Studio suite is the fact that you 
can download ColdFusion MX 7 Developer Edition and use it as a testing 
server. When you start creating server-side ActionScript in Dreamweaver 
that dovetails with an application you’re creating in Macromedia Flash, you 
don’t have to upload everything to the Web server to test your application. 
You can use ColdFusion as a local server and test the Flash application 
(which, as you may remember, is embedded in an HTML file, the pearl in 
Dreamweaver’s oyster) by testing the HTML document in Dreamweaver to 
make sure all is well. 


You can also connect databases with Flash movies to provide personalized 
or continually updated information to viewers and add special features, such 
as text search and dynamic charting, to Flash movies. 
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Book V 
Contribute 3 





The 5h Wave B 


Rich Tennant 
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Contents at a Glance 


Chapter 1: Introduction to Contribute 3 

Chapter 2: Basics for Contributors 

Chapter 3: Contribute 3 Administration 

Chapter 4: Integrating Contribute 3 with Other Macromedia Products 


Chapter 1: Introduction 
to Contribute 3 


In This Chapter 


Deciding when to use Contribute 
Checking out the Contribute interface 


Setting your preferences 


Fo many big Internet and intranet sites these days, Web development 
experts are the authors (that is, they design and build it from scratch, 
or at least set up its basic framework). After a site is established, it may 
then need to grow and change — which in the past meant calling in that 
handy Web development expert again to update a Web site. Now, however, 
people more familiar with the content that needs to go on the site than with 
the vagaries of Web development are being asked to take on the responsibil- 
ity of updating the original pages or adding new pages based on existing 
designs. 


The original version of Dreamweaver was built to enable people to create and 
modify Web pages without having to learn the boring ins and outs of HTML. 
The funny thing is, the “new-and-improved” Dreamweaver 8 has become so 
powerful as an authoring tool that it’s too complex and intimidating (and 
expensive!) for non-experts who simply want to maintain an existing site. 


So what’s a non-expert to do? Read on to discover the answer. 


Why Contribute? 


When Dreamweaver is too much, Contribute is just right. Contribute is 
designed especially for people who must contribute to an existing site but 
don’t need to know how to develop a site from scratch. 


Contribute is streamlined to make Web page production as simple as possi- 
ble, which means the application can’t do many things, such as editing the 
HTML making up the page. (However, Contribute 3 can now be set up to 
allow specified users to launch and edit HTML in Dreamweaver.) For those 
kinds of tasks, you definitely still need Dreamweaver. Table 1-1 offers a list 
of some common Web page tasks for which each application can be used. 
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Table 1-1 Comparing the Capabilities of Dreamweaver and Contribute 
Task Dreamweaver Contribute 
Creating a new page from scratch x xX 
Creating a new page from a Dreamweaver template x xX 
Creating a Dreamweaver template x 

Viewing and editing the underlying HTML code directly x 

Adding, deleting, and modifying text and tables x xX 
Adding and deleting images x x 
Creating DHTML navigation bars x 

Adding, modifying, and deleting behaviors (such as x 

JavaScript button rollovers) 

Creating and modifying framesets x 

Modifying content (such as text and images) within frames x X 
Creating forms x 

Creating and editing Cascading Style Sheets (CSS) xX 

Applying CSS styles to text x X 
Working offline x X 
Uploading and downloading Web Pages to/from a x x 


remote server 





As you can see, the capabilities overlap quite a bit, but the more compli- 
cated tasks are best accomplished using Dreamweaver. 


Exploring the Contribute Interface 


The Contribute interface is as streamlined as its functionality, as you can see 
in Figure 1-1. Two panels are at the left, with a big work area — known as the 
Browser — at the right. 


Panel basics 


While other applications in the Macromedia Studio 8 suite have many cus- 
tomizable panels, Contribute has just two basic panels: Pages and How Do I, 
as shown in Figure 1-1. Unlike the panels in other Macromedia Studio appli- 
cations, you can’t move, group, or delete the panels in Contribute. 


You can, however, collapse and expand the panels by clicking the arrow at the 
top left of the panel or by clicking the panel name. If the panel was expanded 
before you clicked, it collapses. If it was collapsed originally, it expands. 
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You can hide (or show) both panels by using the keyboard shortcut F4. 


The Pages panel 

The Pages panel displays the name of the most recent page you browsed to, 
any unpublished drafts (that is, any pages you have downloaded and edited 
but not uploaded back to the server), and the page on which you’re currently 
working. Figure 1-2 shows that we’re connected to the Argyll Adventure Tree 
Web site, that we’re currently working on the page titled “Treets - Adventure 
Tree Records,” and that we have a draft of the “Artists — Argyll Adventure 
Tree Records” page that has been edited but not yet uploaded. 


To navigate to any page listed in the Pages panel, click the title or the icon to 
the left of the page you want displayed in the Browser. 


If you click the page at the top of the list, the Browser automatically switches 
to Browse mode. If you’re already in Browse mode and you click a draft, the 
Browser automatically switches to Edit mode and displays your page, ready 
to edit. 


The Browser is always at the top of the list in the Pages panel. See “The 
Browser/Editor” section, later in this chapter, for more information on the 
Browser itself. 
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Figure 1-2: 
The title of 
the page 
currently 
being 

edited is 
highlighted 
in the Pages 
panel; the 
page itself is 
available 
for editing 
in the 
Browser. 
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The How Do I panel shows three sections when you open Contribute for the 
first time. Refer to Figure 1-1 to see the panel in its basic state. 


+ Get Started 
+ Add a Page to My Website 
+ Administer a Website 


By default, all sections are expanded. It’s easy to collapse or expand a sec- 
tion; just click the arrow at the left of the section name, or click the section 
name itself. If the section is expanded when you clicked, it collapses. If the 
section is collapsed when you click, it expands. 


Each section has a list of actions you might want to perform. The list is in 
the form of text links, just like on a Web page. The list of links changes, 
based on what you’re currently working on. We collapsed the first two sec- 
tions in Figure 1-2 so that you can see some of the other sections that show 
up automatically in the How Do I panel when you're editing a page. 


When you click a link, the How Do I panel updates, as shown in Figure 1-3. To 
return to the previous page of information in the panel, click the Back button 
at the top left of the How Do I panel. To go back to the original list of links, 
click the Topics icon at the top right of the panel. 





Figure 1-3: 
The How Do 
| panel fits a 
lot of 
information 
in a small 
space by 
using links. 


EN 


Exploring the Contribute Interface 485 








wHow Dol... 





<P Back 22) Topics 
Edit images in Contribute 


You can edit an image in a draft by doing any of the 
folowing 


+ Crop an image 

* Resize an image 

+ Align an image in text Now 

Note: hen you edit an image in Contribute, 
Contribute crestes a copy of the image you are 
editing. Ecits affect only this instance of the image 











The Browser/Editor 

The main work area is called the Browser/Editor. (We call it the Browser to 
save space.) The Browser has two modes, Browse and Edit, and you can only 
be in one mode at a time. The appearance and functionality of the Browser 
depend on which mode you're in. 


When you’re in Browse mode in the Browser, you can navigate anywhere a 
regular Web browser, such as Internet Explorer (IE) or Netscape Navigator, 
could take you. When you’re in Edit mode, you can make changes to a Web 


page. 


Browse mode 

In order to browse to a page you want to update, you must use the Browser in 
its Browse mode. You can tell when the Browser is in Browse mode by look- 
ing at the buttons at the top. The following buttons (as shown in Figure 1-4) 
allow you to navigate as you would using any browser, like IE or Navigator: 


+ Back: Click this button to view the page you were previously viewing in 
the Browser. You can step back one page at a time through each of the 
pages you viewed since you opened the Browser. The Back option in the 
View menu performs the same function. 


+ Forward: Click Forward to go one page at a time from pages you viewed 
earlier to pages you viewed most recently. 


+ Stop: Pages with lots of big images or complex Flash movies sometimes 
take awhile to load in the Browser. Click this button to stop a page from 
loading further in the Browser. 


+ Refresh: As with your regular Web browser’s Refresh button, this button 
reloads the current Web page in the Contribute Browser. 
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by 


The rest of the buttons are specific to the Contribute Browser: 


genBen + Edit Page: Click this button to edit the page you have browsed to. When 
S 


you click Edit, Contribute downloads the page and automatically sets 
the Browser to Edit mode. This option is not available if you don’t have 
what Contribute calls a connection — that is, permission to edit the 
page. 


+ New Page: Click this button to create a new page on the current Web 
site. You are prompted to name the page and, if you desire, to choose a 
page or template to use as a basis for the new page. See Book V, Chapter 
2 for more details. 


+ Home Pages: Use this button to navigate quickly to the home pages of 
the sites to which you have Contribute connections. Click and hold to 
see a drop-down list of eligible home pages. 


+ Go: This button works in conjunction with the Address text input field. 
See the following instructions for browsing to a page on the Internet. 


+ Choose: Click this button to open a dialog box in which you can navigate 
quickly to any page on the Web site you’re currently updating. 


Figure 1-4: 
The 


Browser Fede Page | Ù) NewPage| da Bach @ Stoo [C] Refresh M, Home Pages 
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mode. 





To browse to a page on the Internet, just follow these simple steps: 





1. Type or paste a URL (such as www. EarlsBowlateria .com) into the 
Address field at the top of the Browser. 


2. Click the Go button at the right of the address input field or press 
Enter. 


The requested Web page opens in the Browser. 


When you browse to a site you have been set up to edit, the top left of the 
Browser toolbar has two buttons: Edit Page and New Page. (Refer to Figure 
1-4.) When you browse to a page you are not set up to edit, the buttons are 
replaced by the Create Connection button. (See the section on connecting 
to a site in Book V, Chapter 2 for more information on creating connections.) 
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Edit mode 


The Edit mode is what Contribute is all about: It’s the mode that you use to 
make changes to Web pages. To get into Edit mode after you’ve browsed to 
an editable page, do one of the following: 


+ Click the Edit Page button at the top left of the Browser. 
or 

+ Choose File>Edit Page. 
or 

+ Use the keyboard shortcut Ctrl+Shift+E. 


To get into Edit mode if you haven’t yet browsed to a page you have permis- 
sion to edit, click the name of an existing draft in the Pages panel (or click 
the icon next to the name). The draft opens in the Browser, and the Browser 
automatically switches to Edit mode. 


Most of Book V, Chapter 2 is about the things you can do in Edit mode, so if 
you’re anxious to get to work on a site, skip ahead to the next chapter. 


Menus 


The Contribute menu bar sports eight menus, each of which includes several 
choices. (Many of the choices are also available from buttons at the top of 
the Browser.) We give you some details about the first three menus, as well 
as brief descriptions of what the other five offer: 


+ File: Every computer program has a File menu, with options like Open, 
Save, and the like. The Contribute File menu offers the following: 


e New Page: Select this option to create a new Web page. You can 
create a new page from scratch, from an existing page, or from a 
Dreamweaver 8 template. See Book V, Chapter 2 for details. 


e Actions: New to Contribute 3, the Actions option groups the most 
common functions in a submenu. See FileActions later in this list 
for details. 


e Save: Select this option to save the work you have done on a draft 
without publishing the edited page. After saving, you may continue 
work on the draft. 


Save for Later: Select this option to save the work you have done on 
a draft without publishing the edited page; the Browser will automat- 
ically change from Edit mode to Browse mode and load the last page 
you were looking at in Browse mode. 


e Preview in Browser: Select this to see what your draft looks like in 
your regular browser (IE, Navigator, Opera, Safari, and so on). 
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Figure 1-5: 
The Actions 
submenu as 
it appears 
when a 
page is 
being 
edited. 


Export: Select Export to save a copy of the page you’re working on to 
your local hard drive (or to a removable disk or remote hard drive). 


Page Setup: Select this option to open a dialog box that allows you to 
customize how your printer deals with your page (paper size, orien- 
tation, and so on). 


Print: As you might expect, you can print your Web page by selecting 
Print from the File menu. 


Print Preview: Select Print Preview to see on your computer screen 
a representation of how your Web page will appear on paper when 
you print it. 


Delete Page: Select Delete Page to remove a page from your Web site. 
This option is available only when the Browser is in Browse mode. 


Work Offline: Select this option if you don’t need to upload or down- 
load any unpublished drafts you’re editing, or if you’re temporarily 
unable to connect with your network or the Internet. 


Drafts: Use this option to open an unpublished draft of a page. 


Recently Published Pages: Use this option to view in the Browser a 
page you recently published. 


Exit: Select this option to close Contribute. You can also close 
Contribute by pressing Ctrl+Q or Alt+F4 on your keyboard. 


+ File™Actions: This new submenu groups together all the most common 
publishing actions (as shown in Figure 1-5). Many of these actions are 
available as buttons in the Browser. 


File 


Drafts 





Exit 


New Page... 


Work Offline 


e Edit Page: This option is available only when the Browser is in Browse 


mode and is currently displaying a page you have permission to edit. 
When you choose File Actions™Edit Page, Contribute downloads the 
page to your computer and makes it available for modification. 
Clicking the Edit Page button in the Browser does the same thing. 
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e Send for Review: Select this to upload a temporary version of your 
page to the server and send an e-mail to a co-worker with a link to 
the temporary page. If you need someone’s approval before you 
publish a page (that is, before you make it live on the site so users 
can see it), E-mail Review is a handy automated way to show your 
work to the person who can approve it. 


e Publish: Select this option to upload an edited page to the server. 


e Publish as New Page: Select this option to upload a page to the server 
with a new filename (such as aboutus .htm). You’re prompted to type 
or paste in the new filename. See Book V, Chapter 2 for details. 


e Cancel Draft: Select this to delete the draft you’re currently working 
on from your computer. Note: Selecting Cancel Draft does not delete 
the page from your Web site. 


e Undo Send: Select this to remove a draft from a reviewer’s Pages 
panel and put it back in yours. If the reviewer has sent the draft to 
another reviewer, you can’t undo the send. 


e Edit Page Source in External Application: Select this to launch 
Dreamweaver (or another text editor) to edit the underlying HTML 
source code of the page. Your site administrator must enable this 
option in order for you to use it. 


e Roll Back to Previous Version: If you find you’ve published a page 
that has a mistake on it, select Roll Back to Previous Version to 
restore the previously published version of the page. See Book V, 
Chapter 3 for more information on this feature, which must be set 
up by an administrator. 


e Delete Page: Select this to delete the page you’re currently editing. 
This will delete both your draft and the page on the server. Depending 
on your permissions, this option may not be available to you. 


e Delete Draft: Select this to delete the draft you’re currently editing. If 
you're editing an existing page, the last saved version of the page will 
remain on the server. 


+ Edit: The options under the Edit menu include such perennial favorites 
as Cut and Paste, as well as a few Contribute-specific options. Which 
options are live (not grayed out) at any given time depends on your 
most recent action. 


e Undo: Select this option to undo your most recent actions in a draft, 
one at a time. You can’t use Undo to alter a published page; for that, 
you need to choose File™Roll Back. The keyboard shortcut for Undo 
is Ctrl+Z. 


e Redo: Redo is sort of an undo of an undo. Select this option to redo 
the last actions you undid in your draft, one at a time, or use the key- 
board shortcut Ctrl+Y. 
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e Cut: Select this option to remove highlighted text or objects from 
your draft. You can then paste the text or objects into the same page, 
a different page, or even a different kind of document (for example, a 
Word document). The keyboard shortcut to cut highlighted objects 
is Ctrl+X. 


e Paste: After you’ve selected some text or objects (like images, for 
example), select this option to paste the text or objects into your 
draft, or use the keyboard shortcut Ctrl+V. 


e Paste Text Only: After selecting a block of text that also includes 
images or other objects, you can use this option to paste only the 
text from your selection. You can also use the keyboard shortcut 
Ctrl+Shift+V. 


e Clear: Use this option to remove selected text or objects from your 
Web page. Unlike Cut, this option does not allow you to paste the 
removed text or objects elsewhere. 


e Find: Use this option to find any string of characters (a word or 
phrase, for example) on a page you’re currently editing. You can also 
automatically replace that string with another string (such as chang- 
ing, say, “Go back to top” to “Go to top”). If the string appears multi- 
ple times on the page, you can change each instance one at a time or 
click Replace All and change every instance at once. 


e Select All: Use this option to select everything in a draft. You can 
then cut, paste, or clear everything at once. The keyboard shortcut 
for selecting all is Ctrl+A. 


e Preferences: Select this option to open a dialog box that allows you 
to customize the way Contribute works. See the “Setting Preferences” 
section, later in this chapter, for details. 


e My Connections: Use this option to view, edit, and delete the connec- 
tions you have to the sites you maintain. 


e Administer Websites: If you have Administrator privileges on a site 
to which you have a connection, use this option to open the 
Administration dialog box and change any settings for the selected 
site. See Book V, Chapter 3 for information on sitewide settings, per- 
mission groups, and setting up users. 


+ View: The View menu offers options related to what you see onscreen in 
Contribute. 


e Sidebar: Select this option to show or hide the sidebar, which con- 
tains the Pages and How Do I panels. 


e Home Pages: Select this option to open the home page for any site 
you can connect to in Contribute. 
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Draft Console: Select this option to view the Draft Console, which 
shows you any drafts you have edited but not published, as well as 
any drafts you have been asked to review or have sent to someone 
else to view. 


Refresh Drafts: Select this option to update the Draft Console. 


Draft History: If you have received a draft for review, you can select 
this option to open a window in which you can read a history of the 
changes made to the draft. 


Browser: Select this option to switch to Browse mode. The last page 
you looked at in that mode appears in the Browser. You can use the 
keyboard shortcut Ctrl+Shift+B or click the top line in the Pages 
panel to do the same thing. 


Go to Web Address: If you select this option, a dialog box opens in 
which you can type or paste a URL to open a particular Web page in 
the Browser. When you click OK, the Browser switches to Browse 
mode — if it wasn’t already — and loads the page you requested. You 
can also use the keyboard shortcut Ctrl+O to open the Go to Web 
Address dialog box. 


Choose File on Website: This option allows you to navigate directly 
to an editable page from a window that displays all the sites to which 
you have a Contribute connection. 


The Back, Forward, Stop, Refresh, and Home Pages options function 
just like their corresponding buttons in the Browser. See the “Browse 
mode” section, earlier in this chapter, for the skinny on them. 


+ Bookmarks: A bookmark is a link to a Web page. Options here allow you 
to add and delete bookmarks to Web pages you visit often. If your main 
Web browser is IE, you see all your IE bookmarks listed under the Other 
Bookmarks option. 


+ Insert: Select an option in this menu to insert an item into a draft. The 
Insert menu allows you to insert the following items into a draft: 


Table e Horizontal rule 

Link e Line break 

Shared asset e Special characters 

Image e PayPal button 

Flash e Google search field 

Movie e Microsoft Office document 
Breeze Link e Document with FlashPaper 


Date 
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+ Format: You can use the options in this menu to format selected text in 


+ 


a draft. You can apply CSS styles, as well as more traditional HTML text 
treatments like bold and italic. See Book V, Chapter 2 for details on text 
formatting in Contribute. The Format menu also gives you access to the 
Contribute Spell Check (keyboard shortcut: F7) and to edit Page 
Properties, such as title and background color (keyboard shortcut: 
Ctrl+J). 


Table: This menu offers commands that allow you to insert and edit 
tables in your draft. 


+ Help: The Help menu gives you a choice of several kinds of help: 


e Macromedia Contribute Help: Select this option to view standard 


help files, with step-by-step instructions. 


Quick Start Guide: Select this option to see instructions on 
Contribute to help get you up and running quickly. 


Contribute Support Center: When you select this option, your regu- 
lar Web browser opens to the Contribute Support home page on 
Macromedia’s Web site. 


Contribute Tutorial: Select this option to access a set of guided les- 
sons on basic tasks you can perform with Contribute. 


The Help menu also allows you to open the Contribute Welcome 
page in the Browser, print your Contribute registration form, submit 
your registration online, and see the About Contribute window, 
which shows information about the version you’re running. 


The Insert, Format, and Table menus give you ways to perform the tasks we 
discuss in more detail in Book V, Chapter 2. 


Setting Preferences 


For most users, the default Preferences should suffice, but you may wish (or 
need) to make a few changes in order to use Contribute most efficiently. To 
open the Preferences dialog box, choose Edit™Preferences. 


The Preferences dialog box includes six “screens”; you access the different 
screens by selecting one of the items in the list on the left side of the dialog 
box; see Figure 1-6. A brief overview of each page follows. 


Figure 1-6: 
The 
Preferences 
dialog box. 
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Setting Editing preferences 


By default, the Preferences dialog box opens to the Editing screen: 


+ Editing Options 


e Enable Screen Reader Support: Select this check box if you have a 
visual impairment that hinders your ability to work with Contribute. 


e Spelling Dictionary: Choose a dictionary language from the drop- 
down list. Contribute uses the dictionary to spell-check Web page 
drafts. 


Setting File Editors preferences 


You can tell Contribute what application you want it to use to open various 
types of files when you double-click the files in the Browser in Edit mode. To 
set Contribute to open a particular type of file with a particular application, 
just follow these steps: 


1. Select File Editors from the list on the left side of the Preferences 
dialog box. 
The File Editors options appear, as shown in Figure 1-7. 


2. If the extension is not already listed in the Extensions list box, click 
the + button above the Extensions box. 


If the extension is already listed in the Extensions box, skip to Step 4. 
A cursor blinks at the bottom of the list. 


3. Type the name of the extension, including the dot (for example, type 
.wav for a WAV audio file), and press Enter. 


The extension you typed remains highlighted. 
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Figure 1-7: 
Setting the 
File Editors 
preferences 
for GIFs. 
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Extensions kad Edtors 
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txt 
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„doc 
yie v 
Help OK Í Cancel 





4. If the application is not already listed, click the + button above the 
Editors box. 


If the application is listed, click its name to select it and skip to Step 6. 
The Select External Editor dialog box pops up. 


5. Navigate to the application and double-click its icon, or type the path- 
name (including the application name) into the File Name text field. 


The application name appears in the Editors box. 


6. Set any other file editor preferences and click OK when you’ve 
finished. 


Contribute comes with quite a few defaults (naturally, Macromedia Studio 8 
applications feature prominently), so you may never need to touch the File 
Editors preferences. You can assign more than one application to edit a par- 
ticular file type. If you do that, you need to designate one of the programs 
as the primary application by selecting it in the File Editors screen of the 
Preferences dialog box and clicking the Make Primary button. 


Setting FTP Proxy preferences 


If your computer is separated by a firewall from the server that houses your 
site (or sites), use the FTP Proxy screen of the Preferences dialog box to 
input the host name and port number that allow you to tunnel through the 
firewall. If you’re not sure what all that means, ask someone in your IT 
department. 
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Setting Invisible Elements preferences 


When you link some text or an image to a particular line on a Web page, you 
need to place an invisible target (an anchor) at that line. Select Invisible 
Elements in the list box on the left of the Preferences dialog box to see the 
Invisible Elements options. Leave the Show Section Anchors When Editing a 
Page check box selected if you want to be able to see icons that identify 
where invisible anchor links are in your draft. 


Setting Microsoft Documents preferences 
You can choose one of the following options for the way Contribute treats a 
Word document or Excel spreadsheet when you insert it into a draft: 


+ Insert the Contents of the Document into the Current Draft: Choose 
this option if you want Contribute to convert the contents of the docu- 
ment into HTML. 


+ Insert the Document with FlashPaper into the Current Draft: Use this 
option if you want to use Contribute’s FlashPaper 2 technology to con- 
vert the document. See Book V, Chapter 4 for details. 


+ Create a Link to the Document: Use this option if you want Contribute 
to upload the Office document to your Web site and put a link to the 
document in the draft you’re currently editing. 


+ Ask Whenever I Insert a Microsoft Office Document into Contribute: 
Use this option if you need to handle inserting Office documents into 
your Web pages on a case-by-case basis. This option is selected by 
default. 


Setting Security preferences 

If you share a computer with other people and don’t want them to have access 
to Contribute (and therefore to the sites you maintain), open up the Security 
options in the Preferences dialog box and select the Encrypt Connection 
Information For All Websites check box. Then follow these steps: 


1. Click in the Password text field, type a password, and press the 
Tab key. 
The cursor moves to the Confirm Password text field. 


2. Retype your password in the Confirm Password text field exactly as 
you typed it in the Password text field. Go on to Step 3, or press Enter 
or click OK. 


Contribute asks for a password when you launch the application. 
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3. Select the Require Password at Startup option if you want users to 
enter a password in order to launch the application. 


4. Press Enter or click OK. 


You can change your preferences at any time by choosing 
Edit™Preferences. 


Chapter 2: Basics for Contributors 


In This Chapter 


Getting a site connection 

Opening an existing page for editing 
Creating a new page 

Working with text and tables 
Inserting images and links 

Taking a look at your work 

Putting a page on the Web 

Working with others 


C. ontribute 3 is a remarkably easy-to-use tool for editing existing pages 
on — or adding new pages to — a Web site. As with the original 
Contribute version, many of the things you need to do to add or replace 
content (or build a page based on an existing design) take little more than a 
click — and you don’t have to know a thing about HTML. 


With Contribute 3, Macromedia has added many features to the last version 
of the application while keeping it simple enough for nontechnical users — 
no small task. This chapter is all about how using the Contribute 3 tools can 
make modifying or creating a basic Web page easier. If you need to know 
about things like setting yourself up as a site administrator or sending a 
connection key to a fellow site contributor, see Book V, Chapter 3. 


Connecting to a Site 


To put Contribute 3 to use when working on a Web site, you must be con- 
nected to that site. Being connected means establishing an FTP (File Transfer 
Protocol) connection between your computer and the remote server that 
your site lives on. If that sounds complicated, don’t worry. It’s actually 
pretty simple. 


You can connect in two ways: 


+ By using a connection key that the site administrator has e-mailed 
to you 


+ By entering information in the Connection Wizard 
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Both ways are pretty simple, but you’ll need some information about your 
Web server to employ the latter method. If you’ve been sent a connection 
key, read the next section to find out how to use it. If you need to connect to 
a site but don’t have a key, skip ahead to the “Connecting to a site with the 
Connection Wizard” section. 


Connecting to a site with the connection key 

A connection key is an encrypted file that contains nearly all the information 
Contribute needs to connect your program copy to the Web site you’re 
updating. (You also need to get a password from your administrator.) You 
might receive a connection key 


+ Via e-mail from the site administrator 
+ By downloading it from your local network 
Most likely, you’ll get your connection key via e-mail, but it works the same 


either way (just skip Step 2). To open a connection to the Web site you'll be 
working on, just follow these simple steps: 


1. Open the e-mail from your site administrator that contains the connec- 
tion key. 


The connection key shows up as an attachment; see Figure 2-1. The 
e-mail body contains instructions on using the key. The connection key 
name is based on the name the site administrator gives the site connec- 
tion in Contribute. 


2. Double-click the connection key. 


Contribute starts up (if it’s not already open), and the Import 
Connection Key dialog box opens. 


3. If your name is not already there, click in the What Is Your Name? text 
field and type your name. 


4. Press Tab or click in the E-mail text field. 


5. If your e-mail address is not already there, type your e-mail address in 
the next field. 


6. Press Tab or click in the next text field. 


If you already have a connection to another Web site, your e-mail 
address may already be entered in the field. 


7. In the What Is the Connection Key Password? text field, type the pass- 
word given to you by the site administrator. 
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Connection key 


Macromedig Contribute connection key for Argyll Adventure Tree 
Records 


A Andy Cowitt [ancdycowntt@andycowitt.com] 











To: andycow@wertzateris.com 
a ArgylAdventureTreeRecords-Role. ste (1 KB) 


This e-mail contains a connection key to connect Macromedia 
Contribute to your website so that you can edit website 
content. To import this connection key: 


1. Ensure that Macromedia Contribute is installed on your 
computer. If it's not installed, contact the sender of this e- 
mail for instructions, or go to 
http://vsw.macromedia.com/contribute. 





2. Double-click the connection key e-mail attachment, 





Fi 2 1: 3. Complete the dialog box that appears in Contribute, then 
igure whe click OK. If you have not received the password for the 
The connection key, contact the sender of this e-mail. 


connection Contribute will connect to your website so you can begin 
key fe editing. 

marked 

as an 
attachment 
to this 
e-mail. 








The password may have been sent in a separate e-mail or told to you on 
the phone. If you don’t yet know the password, check with the site 
administrator. 


8. Click OK. 


The Contribute Browser loads the site’s home page. 


The connection key should have all the FTP information that allows you to 
connect to your Web server. In some cases, you may have to input the FTP 
information manually. The next section tells you how. 


Connecting to a site with the Connection Wizard 


Contribute saves you the trouble of having to use an FTP client to move Web 
pages back and forth between your computer and the server that hosts your 
Web site. When you click the Edit button in the Browser, Contribute automat- 
ically gets (downloads) the page for editing. When you click the Publish 
button, Contribute puts (uploads) the page to the Web server. After you’ve 
set up a connection, Contribute transparently handles all the downloading 
and uploading. 
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Connecting to a Site 


The Connection Wizard makes connecting to a remote Web server a snap, if 
you have the login information at hand. Just follow these steps to set up a 
connection, after you have opened Contribute: 


1. 


Ta. 


7b. 


Type or paste the URL for your site (for example, 
http: //www.MySite.com) into the Address field of the Contribute 
Browser. 


. Either press Enter or click the Go button. 


The Contribute Browser takes you right to your site. 


You can use the Contribute Browser to view any site on the Web, but you 
can only set up a connection to a site if you have FTP information for 
that site. 


. Click the Create Connection button at the top left of the Browser. 


The Connection Wizard opens to its Welcome screen. 


. We’re assuming you don’t have a connection key, so click the Next 


button at the bottom of the wizard. 


The Website Home Page screen appears. 


. Enter the URL (http: //www.MySite.com, for example) for the Web 


site you'll be editing into the text field, and then click Next. 


You can also click the Browse button, which opens a browser window 
for navigating to the site. 


When you click Next, the Connection Information screen appears in the 
wizard. 


. Select a connection method from the drop-down list. 


You have the following options: FTP, Secure FTP (SFTP), Local/Network, 
and WebDAV. If you’re not sure what to select, check with your IT person 
or site administrator. Depending on what you choose, different text 
fields appear below the drop-down list. As you can see in Figure 2-2, 
we've entered FTP. 


If in Step 6 you selected FTP or SFTP, enter the FTP server name (for 
example, ftp.EarlsBowlateria.com), the FTP login, and the FTP 
password in the respective text fields. Click Next. 


The FTP login is sometimes called the username. 


The Testing Connection window appears. When the connection is con- 
firmed, the User Information screen appears. 


If in Step 6 you selected Local/Network, enter the network path (for 
example, \\mynetwork\mydepartment\site) by typing, by pasting, 
or by clicking the Choose Folder button and browsing in your net- 
work to the folder containing your site. Click Next. 


Figure 2-2: 
FTP 
information 
entered 

in the 
Connection 
Information 
screen. 
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The User Information screen appears. 
8. Enter your name in the What Is Your Full Name? text field. 


Your name may already appear. The name in this field identifies you to 
other contributors to your site, if there are any. 


9. If it’s not already there, enter your e-mail address in the What Is Your 
E-mail Address? text field, and then click Next. 


If your site already has an administrator, the Role Information screen 
appears. Go to Step 10. If the site doesn’t have an administrator, the 
Summary screen appears. Go to Step 11. 


10. Click the role you’re assigned to and click Next. 


If you click Administrator, a pop-up window may appear. Enter the 
Administrator password and click OK. Congratulations! You’ve made it 
to the Summary screen. 


11. Make sure the Summary screen information is correct. 


If it isn’t, use the Back button to go to the screen with incorrect info and 
fix the mistake; then use the Next button to return to the Summary 
screen. 


12. Click Done. 

Unless any of the information you put in the Connection Wizard changes, 
you never have to think about it again — from here on in, you can just get 
straight to work making changes to your site. 


If you want to make yourself the site administrator, see Book V, Chapter 3. 
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Opening an Existing Page for Editing 


After you’ve established a connection to your site, you’re ready to start 
making changes to existing pages and even creating new ones. Downloading 
a page to edit is extremely easy — just follow these steps: 


1. Type or paste the URL of the page you want to edit (for example, 
http: //www.MySite.com) into the Address field of the Contribute 
Browser. 


2. Either press Enter or click the Go button. 


The Browser loads your page, and the Edit Page and New Page buttons 
appear at the top left of the Browser. If the page is not available for edit- 
ing, the warning You are viewing a page on a Web site that 
you haven't created a connection to appears under the 
Address field in the Browser. 


3. Click the Edit Page button. 


The Browser switches to Edit mode, and the page appears as a draft in 
the Browser. The Browser’s toolbar at the top changes to show buttons 
for inserting links, images, tables, and text, as shown in Figure 2-3. 
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Creating a New Page 


If opening a page for editing is a snap, creating a new page is maybe three 
snaps. To create a new page for your site, follow these simple steps: 


ar 


1. 


3a. 


3b. 


3c. 


If you have connections to more than one Web site, use the Contribute 
Browser to go to the site to which you want to add a page. Otherwise, 
skip to Step 2. 


The Browser loads your page, and the Edit Page and New Page buttons 
appear at the top left of the Browser. If the site is not available for edit- 
ing, the warning You are viewing a page on a Web site that 
you haven't created a connection to appears under the 
Address field in the Browser. 


Click the New Page button or choose File~New Page. 
The New Page dialog box appears. 


If you want the new page to have the same basic appearance and 
structure (for example, to have the same navigation items and basic 
layout) as the page currently showing in your browser, click the Copy 
of Current Page option in the Create New Page From pane of the New 
Page dialog box. 


If you want to create a page from a Dreamweaver 8 template, click the 
template name in the Create New Page From pane. 


If the templates are in a folder and you don’t see them, click the plus (+) 
sign next to the folder that holds the templates; the contents of the 
folder appear. A template preview appears in the Preview pane, as 
shown in Figure 2-4. 


If you want to start the page from scratch, skip to Step 4. 


The Blank Web Page option may not be available to you, depending on 
how the administrator has set up your connection. 


Type or paste a page title in the Page Title text field. Click OK. 


Your new page opens in the Browser, as a draft ready for editing. The 
page title appears at the top of the Web browser’s window when people 
view your Web site. 


You can also create a new page by using the keyboard shortcut Ctrl+N. 
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Figure 2-4: 
The New 
Page dialog 
box allows 
you to 
select a 
template on 
which to 
base your 
new page. 
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Working with Text 


Text is often the most abundant element on a Web site. Contribute makes 
adding, formatting, and deleting text a piece of cake. 


Adding text 
To add text to a draft (that is, to a page that’s ready for editing; see the 
previous sections, “Opening an Existing Page for Editing” or “Creating a 
New Page”), just follow these easy steps: 
1. Click the place in the draft where you want to insert text. 
A cursor blinks in the spot you selected. 
2. Type or paste the text. 


You may need to format the text. See the “Formatting text” section for 
the lowdown. 


Formatting text 

Text formatting entails everything from setting a font face and font size, to 
emphasizing words or phrases by making them bold or italic, to creating 
numbered or bulleted lists. It’s all as easy as clicking a button in Contribute. 


Figure 2-5: 
You can 
format text 
in many 
different 
ways. 
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You can format text either before or after you insert it on a page. If you’re 
working from a template, text areas may be preformatted for things like font 
size, color, and face. If not, the text you insert conforms to the settings in the 
text toolbar (the second row of the Browser). 


Setting a text style 


To set the font style, choose a style from the Style drop-down list at the top 
left. If you have CSS styles attached to your page, they appear in the menu; 
otherwise, your choices are Normal and Heading 1 (largest) through Heading 
6 (smallest). 


Setting a text face 


To set a face for your font (for example, Arial, Verdana, and so on), choose 
one from the Font drop-down list (to the right of the Style list). If you leave 
the setting at Default, the text’s appearance is determined by a site visitor’s 
browser settings. 


Setting a text size 


Choose a text size from the Size drop-down list. The smallest is 8 (too small 
for anything but the proverbial “fine print”), and the largest is 72 (too big 
for most uses). If you select Default, the text’s size is determined by a site 
visitor’s browser settings. Figure 2-5 shows just some of the ways you can 
format text. 
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Selecting text 


To select text, click and drag over the text you want. The selected text is 
highlighted. If you change the style, font face, size, color, or background 
color settings while text in your draft is selected, the selected text (and 
only it) changes to reflect the new settings. 


Aligning text 

Contribute allows you to align text to the left, center, or right, or to justify 
the text at the left and right (though the latter is extremely rare on the Web). 
To align text, place the cursor anywhere in the block of text you want to 
align (or select a block of text by clicking and dragging) and click an Align 
button (from left to right, the Align buttons are Align Left, Align Center, Align 
Right, and Justify). 


Adding boldface to your text 


To make some text bold, follow these steps: 
1. Select the text by clicking and dragging until all the text you want 
bold is highlighted. 
2. Click the Bold button or use the keyboard shortcut Ctrl+B. 


The selected text becomes bold. 


You can remove the bold formatting from text by following the same steps. 


Italicizing your text 
To italicize some text, follow these steps: 


1. Select the text by clicking and dragging until all the text you want 
changed is highlighted. 
2. Click the Italic button or use the keyboard shortcut Ctrl+I. 


The selected text becomes italicized. 


You can remove the italic formatting from text by following the same steps. 


Changing the text color 

Web text is typically black by default but can be set to default to other 
colors. If you’re working with CSS styles or Dreamweaver templates, default 
text colors may be set for you already. 
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To change the color of a specific block of text, follow these steps: Book V 
Chapter 2 


1. Select the text by clicking and dragging until all the text you want 
changed is highlighted. 


2. Click the Text Color button in the Browser’s Text toolbar. 


The Text Color button is the one on the second row, toward the right, 
with a capital A on it. When you click it, the color picker pops up. 
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3. Click a cube of color with the eyedropper to make the selected text 
that color. 


For details on how to use the color picker’s advanced features, see the 
section on adding color in Book III, Chapter 3. 


Changing the text background color 
When you change the text background color, you’re changing just that: the 
background of each chunk of text, be it letters or numbers. 


To change the text background color of some text, follow these simple steps: 


1. Select the text by clicking and dragging until all the text you want 
changed is highlighted. 


2. Click the Highlight Color button in the Browser’s Text toolbar, as 
shown in Figure 2-6. 
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This text is highlighted. 








This text is not highlighted | 


Figure 2-6: 
The text 
background 
color acts 
like a 
highlighter 
marker. 
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The Highlight Color button is the one with the highlighter marker; it’s 
just to the right of the Text Color button. When you click the Highlight 


Color button, the color picker pops up. 


3. Click a cube of color with the eyedropper to make the background of 


selected text that color. 


For details on how to use the advanced features of the color picker, see 


the section on adding color in Book III, Chapter 3. 


Creating a numbered list 


You can create a numbered list the fancy way, with complicated tables and 
uch, or you can do it the easy way, using the numbered list convention built 
into HTML. Contribute makes the easy way even easier. To create a num- 


S 


bered list, just follow these steps: 


1. Click the Numbered List button in the Browser’s toolbar, as shown in 


Figure 2-7. 


The indented number 1 appears, followed by a period, a space, and a 


blinking cursor. 


Bulleted List button 


Numbered List button 











Figure 2-7: 
Contribute 
allows you 
to create 
numbered 
and bulleted 
lists easily. 





A Publish | g Send for Review | SE] Save for Later | $€ Cancel | =), Æl x: 














stylel [~ Verdana vii2 vi Bs Ez 





Text introducing the numbered list. 
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2. Listitem two 
3. List item five. Just kidding. This is list item three. If the text in my list 
item spills over into the next line, Contribute automatically indents the 
second line just as an ordinary browser would do 
Text following the numbered list 


Text introducing the bulleted list 
» Bulleted item 1 
« Bulleted item 2 
« Bulleted item 3 

Text after the bulleted list 
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2. Type the first item in your numbered list. Press Enter when you’re 
finished. 


The number 2 automatically appears on the next line, followed by a 
period, a space, and a blinking cursor. 


3. Type the second item in your numbered list, press Enter, and con- 
tinue to enter items until you have completed your list. 


Leave the extra number for which you don’t have an item. 
4. Click the Numbered List button to deactivate the numbering. 


The last (extra) number disappears, and the cursor goes to its non- 
indented position below the list. 


Creating a bulleted list 
HTML has a specification for bulleted lists, just as it does for numbered lists. 


Contribute knows the specification so you don’t have to. To create a bulleted 
list, simply follow these steps: 
1. Click the Bulleted List button in the Browser’s toolbar. 


An indented bullet appears, followed by a little space and a blinking 
cursor. 


2. Type the first bullet item and press the Enter key. 


A bullet appears on the next line, followed by a little space and a blink- 
ing cursor. 


3. Type the second bullet item, press the Enter key, and repeat the 
process until you have completed your list. 


An extra bullet remains temporarily at the bottom of your list. 
4. Click the Bulleted List button to deactivate the bulleting. 


The last (extra) bullet disappears, and the cursor goes to its non- 
indented position below the list. 


Working with Tables 


You might use tables on a Web page in two basic ways: 


+ To display tabular information, such as a spreadsheet 


+ To control page layout 


No matter which function you want the table to have, you can add, modify, 
and delete the table using the same simple methods. Tables are made up of 
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Figure 2-8: 
The Insert 
Table dialog 
box asks for 
enough 
information 
to create a 
basic HTML 
table. 





cells, arranged in rows and columns. Picture a basic tic-tac-toe game. It’s 
played on a kind of table, with nine cells arranged in three rows and three 
columns. If you can draw a tic-tac-toe game, you can make a table on a Web 


page. 


Inserting a table 


To insert a table into your page, just follow these steps: 


1. Click the spot in your draft where you want the top-left corner of the 
table to go. 


A blinking cursor marks the spot. 


2. Click the Insert Table button in the top row of the Browser toolbar. 


The Insert Table dialog box appears, as shown in Figure 2-8. 





Insert Table 
Table size 
Number of rows: 
Number of cohamrss: 
Options 


Table width 


Border thickness: 
Cel padding: 
Cel spacing 
Header 











© Default width 
© Specific width: 100 


a| fo 


percent {v 


pixels 
3 pixels between border and content 


pixels between cells 


EILS: 
Lett Top Both 


| 





3. Enter the number of rows you want the table to have in the Number 
of Rows field. 


You can always add or delete extra rows later, if you need to. 


. In the Number of Columns field, enter the number of columns you 


want the table to have. 


You can always add or delete extra columns later. 


5a. 


If it doesn’t matter how wide the table is, leave the Default Width set- 


ting as is and skip to Step 6. 


5b. 


If you want a particular width, select the Specific Width radio button, 


enter a number for the width, and then choose either Pixels or 
Percent from the drop-down list to the right. 


© 


10. 
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If you choose Pixels, the table will be the number of pixels wide that you 
specified. If you choose Percent, you must choose a numeral between 1 
and 100; the table’s width will vary according to the overall page layout, 
and it may vary according to the width of a site visitor’s browser 
window. 


. In the Border Thickness field, enter a number for how many pixels 


thick you want the border of your table to be. 


If you don’t want the table border to show (which you probably don’t if 
you're using the table for page layout purposes), enter 0 (zero). 


. In the Cell Padding field, enter a number for the amount of pixels you 


want between the border of the cell and the text or object inside the 
cell. 


The cell padding applies to the top, bottom, left, and right of the inside 
of each and every cell. 


. In the Cell Spacing field, enter a number for the amount of pixels you 


want between the cells. 


The cell spacing applies to the whole table; you can’t have different cell 
spacing for individual rows or columns. 


. If your table has a header row or header column (or both), click the 


icon that represents the header structure. 


Figure 2-9 shows a table with a single header row. The text in that row is 
automatically bold and center-aligned in the cells. 


Click OK. 


The Insert Table dialog box closes, and an empty table appears in your 
draft, built to your specifications and ready to be filled with content. 


Adding information to a table 
Adding text and images to a table is pretty much the same as adding them 
anywhere else on a draft. To add text to a table, follow these steps: 


1. 


Click in the cell where you want to put the text. 


A cursor blinks in the cell. 


. Type or paste in the text. 


The cell expands downwards. In some cases, the cell also expands to the 
right, depending on its width and the nature of the text. For example, a 
long e-mail address, which is made of many characters strung together 
without a space, can stretch a cell. (Refer to Figure 2-9.) The other cells 
may become narrower to compensate. 


. Click in another cell or outside the table if you want to add more 


information to the table or elsewhere on the draft. 
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Name Address Phone Email Age 


Earl Ives 14 Maple Way 319-555-1212 — earl@earlsbowlatena.com 62 
Anytown, IA 52801 


Jim Cheree 32905 Main St. 333-555-1212 | pm@earlsbowlateria. com 45 
Twopin, [A 53111 





Figure 2-9: 
Asmall 
table, built 
according 
to the spec- 
ifications 
shown in 
Figure 2-8. 























To add an image or other object to a cell, click in the cell and then follow the 
directions in the “Adding Images, Links, and More” section, later in this 
chapter. 


Modifying a table 


You can modify many properties of an existing table quickly and easily. In 
some cases, you can make the changes by clicking and dragging table or cell 
borders; in other cases, you can enter new settings in the Table Properties 
dialog box. 


Changing the whole table using the Table Properties dialog box 


To make changes to the entire table at once, follow these steps: 


1. Select the table by placing your cursor over the top-left or bottom-left 
corner of the table until the cursor changes into a four-pointed arrow, 
then click. 


The border of the table highlights. 
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2. Click the Table button on the Browser toolbar. Book V 


Yes, it’s the same button you click to insert a table, but when you’ve Chantez 


selected a table that’s already there, the button opens the Table 
Properties dialog box. The dialog box has two tabs: Table and Row 
and Column. (The default view opens to the Table tab, as shown in 
Figure 2-10.) 


3. Select an alignment from the Table Alignment drop-down list. 
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A table can be justified left, center, or right. 


4. Change the table width, border thickness, cell padding, and cell spac- 
ing as needed. 


For more information on those table properties, see the “Inserting a 
table” section, earlier in this chapter. 





Table Properties 
Table | Row and Column 
Figure 2-10: Table aligrenent: DERU x 
Change the Table width: {300 Parels x 
table's Border thickness: [1 pixels 
alignment, Cell padding pixels between border and content 
width, and Cell spacing pixels between cells 
other 
properties in 
the Table 
Properties 
dialog box. 


Borde: color: [>| Background color. | +! 














5. To change the border color, click the Border Color icon and use the 
color picker to choose a color. 


For details on how to use the advanced features of the color picker, see 
the section on adding color in Book III, Chapter 3. 


6. To change the color of the table’s background, click the Background 
Color icon and use the color picker to choose a color. 


Book III, Chapter 3 gives details on how to use the advanced features of 
the color picker. 


7. To change other properties , click the Row and Column tab at the top 
of the dialog box. 
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10. 


11. 


12. 


13. 


The Row and Column options appear. If you have selected only a row 
and not the whole table, the tab says Row. Likewise, if you have selected 
only a column and not the whole table, the tab reads Column. 


. To change the horizontal alignment of elements in each cell, select an 


option from the Horizontal Alignment drop-down list. 


Your options are Default, Left, Center, and Right. Choosing Default allows 
the visitor’s browser to set the cells’ alignment. 


. To change the vertical alignment of elements in each cell, select an 


option from the Vertical Alignment drop-down list. 


Your options are Default, Top, Middle, and Bottom. Choosing Default 
allows the visitor’s browser to set the cells’ alignment. 


To change the background color for the cells in the table, click the 
Background Color icon and use the color picker to choose a color. 


See Book III, Chapter 3 for details on how to use the color picker. 
Decide how you want to determine column width: 


e If you want the table’s column width to be allotted automatically, 
select the Fit to Contents radio button. 


e If you want to set the column widths to a specific number of pixels 
or percentage of the overall width, select the radio button under- 
neath the Fit to Contents radio button, enter a number in the text 
field, and select either Pixels or Percent from the drop-down list. 


If you insert something in a cell that is wider than you have set the 
column to handle, the cell overrides your column width setting to 
accommodate the element, be it an image or a long string of text. 


If you want to keep all the text on a single line within the cells, dese- 
lect the Wrap Text check box. Otherwise, leave the Wrap Text check 
box selected. 


If all the text in a cell won’t fit on a single line and the Wrap Text check 
box is checked, the text is split into as many lines as necessary, given 
the width of the cell. The line breaks come at spaces, dashes, and car- 
riage returns. Deselecting the Wrap Text option may increase the width 
of your table. 


If you’ve selected the entire table, leave the Header Row check box 
alone. 


If you’ve selected a row, you can make it a header row by selecting the 
Header Row check box, or you can remove its header row formatting by 
deselecting the Header Row check box. 


ar 
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14. Decide how you want to determine row heights: 


e If you want them determined by the content in the rows (each row is 
only as large as the biggest cell in that row), select the Fit to 
Contents radio button next to the Row Height section. 


e If you want them set in pixels, select the radio button below the Fit to 
Contents radio button and enter a number for the height you want 
the row to be in pixels. 


15. When you’ve made all the changes you want, click OK. 


At any time while you are changing settings, you can click the Apply 
button to see the effect before moving on to the next property. 


Changing rows, columns, or individual cells 


using the Table Properties dialog box 

There may be times when you want to change the text alignment in some 
cells but not others, or you want to perform some other task that applies 
only to a particular row or column. In those circumstances, you need to 
select only the cells you want to affect; then you can make the changes using 
the Table Properties dialog box. 


Selecting a row 


To select a row, place your cursor on the table border at the left of the row 
you want to select and click when the cursor becomes a bold right-pointing 
arrow, as shown on the top in Figure 2-11. The row will highlight. 


Selecting a column 


To select a column, place your cursor on the table border at the top of 
the column you want to select and click when the cursor becomes a bold 
down-pointing arrow, a shown in the middle in Figure 2-11. The column 
will highlight. 





Selecting an individual cell or group of cells 

To select an individual cell, triple-click the cell. The cell highlights. To select 
multiple cells, click in one cell, hold the Shift key, and triple-click in another 
cell. The two cells you clicked in and every cell between highlight. 





After you’ve made your selection, click the Table button to open the Table 
Properties dialog box and make the changes just as outlined in the “Changing 
the whole table using the Table Properties dialog box” section, earlier in this 
chapter. If you have selected a row, the Rows and Columns tab says only Row, 
and if you have selected a column, the Rows and Columns tab reflects that by 
saying only Column. 
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Figure 2-11: 
Selecting a 
row (top), a 
column 
(middle), 
and a group 
of adjacent 
cells 
(bottom). 





Name | Address | Phone Email Age 


Earl Ives 14 Maple Way 319-555-1212 | earl@earlsbowlateria com 62 
Anytown, LA 52801 

















Jim Cheree | 32905 Main St 333-555-12 jin@earlsbowlatena.com 45 
Twopm, LA 53111 
Name Phone Email Age 
Earl Ives 319-555-1212 | earl@earlsbowlateria com 62 
Jim Cheree | 32905 Main St 333-555-1212 | jim@earlsbowlateria. com 45 
Twopin, LA 53111 
Name Address | Phone | Email | Age 





Earl Ives 14 Maple Way 319-555-1212 | earl@earlsbowlateria com 62 
Anytown, LA 52801 


Jim Cheree | 32905 Main St 333-555- jim@earlsbowlateria. com 45 
Twopm, LA 53111 














Adding Images, Links, and More 


Adding images to a page is a snap with Contribute. In a way, it’s easier 
than adding a table, because images have fewer properties to set. Same 
goes for adding Flash movies to a page. 


Inserting an image 
If the image you want to insert in your page is on your computer’s hard 
drive, just follow these steps to insert it: 


1. Place your cursor in the draft and click where you want to add the 
image. 


The cursor blinks where the top-left corner of your image will appear on 
the page. You can insert an image in a table cell or anywhere else on the 


page. 


2. Choose Insert™Image™From My Computer or use the keyboard short- 
cut Ctrl+Alt+lI. 


The Select Image dialog box appears. 


3. Navigate to the folder the image is in, and then either double-click the 
image’s filename, or click the filename and click Select. 
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The image is placed in your draft. When you publish the page, 
Contribute automatically uploads the image. Your site administrator can 
set a maximum file size for any image uploaded to your site. If you get an 
error message saying your image is too big, see your site administrator 
or re-export the image from Fireworks at a smaller file size. 


Inserting a Flash movie 
Adding a Flash movie to your page from your computer’s hard drive is easy. 
Just follow these steps: 


1. Place your cursor in the draft and click where you want to add the 
Flash movie. 


The cursor blinks where the top left of your movie will appear on the 
page. You can insert a movie in a table cell or anywhere else on the page. 


2. Choose Insert™Flash>From My Computer. 
The Open dialog box appears. 


3. Navigate to the folder the movie is in, and then either double-click the 
Flash movie’s filename, or click the filename and click Open. 


The Flash movie is placed in your draft. When you publish the page, 
Contribute automatically uploads the . swf file. 


Flash movies have parameters that can be set on a Web page — they affect 
how the movies appear and function — but Contribute only gives you access 
to a couple of them. To make these (limited) changes, select the movie by 
clicking it and then choosing Format™Flash Movie Properties to open the 
Flash Movie Properties dialog box and set the Play on Page Load and Loop 
properties. 


Inserting a link 

Links (short for hyperlinks) are what the Web is all about, so naturally 
Contribute allows you to add links to your pages. You can link from both text 
and images, and you can link fo other pages on your site, other pages on the 
Web, e-mail addresses, and things like PDF files. 


Linking to a Web page 
To add a link from text or an image to a page on your Web site or any other 
Web site, just follow these steps: 


1. Click an image or click and drag to select some text that you want to 
link to another page on the Web. 


The image or text highlights. 
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2. Choose Insert™Link™Browse to Web Page. 


The Insert Link dialog box opens, with Browse to Web Page selected at 
the top, as shown in Figure 2-12. Alternatively, you can choose to link to 
a draft or recently edited page. 
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appearance, | 
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3. Enter a URL (for example, http: //www.MySite.com/contactus. 
htm) in the Web Address text field, or click the Browse button to go to 
the page you want to link to. 


Browsing to the page is often the best way to ensure that you link to the 
correct page. The page you browsed to appears in the Preview area on 
the right. 


4. Click OK. 


You’ve just created a hyperlink. 


Linking to an e-mail address 


When you link to an e-mail address, the link on your Web page opens up a 
new e-mail message in your visitor’s e-mail program. The e-mail is automati- 
cally addressed to the e-mail address you specify in the link. 


To add an e-mail link to some text or an image: 


1. Click and drag to select text or click an image that you want to link to 
an e-mail address. 
The image or text highlights. 

2. Choose Insert>Link™E-mail Address. 


The Insert Link dialog box opens, with E-mail Address selected at the top. 


NING 
RY 
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3. Enter the text that will link to the e-mail address in the Link Text text 
field. 


4. Enter the e-mail address in the E-mail Address text field. 
5. Click OK. 


The selected text or image links to the e-mail address. 


Linking to an e-mail address opens the visitor’s e-mail program only if his 
program is set up to open when such a link is clicked. Most current e-mail 
programs are set up by default to handle an e-mail link. 


You can also link to other drafts, to new pages, and to files on your computer 
(like Word documents and PDF files). See Contribute’s Help files for details 
on how to perform those tasks, or check out Macromedia Contribute For 
Dummies, by Janine Warner and Frank Vera (published by Wiley), which has 
many details that we can’t fit into this minibook. 


Inserting a document as FlashPaper 

FlashPaper, introduced with Contribute 2, can convert your Office docu- 
ments — Word files, Excel spreadsheets, even PowerPoint presentations — 
into compact . swf files (Flash movies) that can be displayed on your Web 
page and viewed by anyone with the Flash plug-in in her browser — which 
is almost everyone! 


To insert an Office document into your draft as a Flash movie, just follow 
these steps: 


1. Place your cursor in the draft and click where you want to add the 
document. 


The cursor blinks where the top left of your image will appear on the 
page. You can insert an image in a table cell or anywhere else on the 


page. 
2. Choose Insert™Document with FlashPaper. 
The Open dialog box appears. 


3. Navigate to the document’s folder, and then either double-click the 
document’s filename, or click the filename once and click Open. 


The FlashPaper Options dialog box appears, as shown in Figure 2-13. 


4. Choose either Portrait (vertical) or Landscape (horizontal) for the 
Page Orientation. 


5. Choose a printed document size from the Standard drop-down list or 
select the Custom radio button and enter a size (width, height, and, 
from the drop-down list, either inches or millimeters). 
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6. Uncheck the Display Document Outline check box only if you don’t 
want the document border to appear in the SWF file. 


The Converting to FlashPaper dialog box appears while the conversion 
takes place. Then the Flash SWF movie is placed in your draft. When you 
publish the page, Contribute automatically uploads the SWF file. 


You can also use the stand-alone FlashPaper printer outside of Contribute if 
you want. See the Help files in Contribute for details. 
NING, 
K2 You can’t edit a FlashPaper movie. If you want to change a FlashPaper movie, 
you must go back and change the document it was made from and convert 
the updated document. 


Previewing Vour Work 


If you make minor text changes to a page, you may not need to see it ina 
browser like Internet Explorer or Opera before you put it on your Web site 
for the whole world to see. But if you make extensive changes, or if you’ve 
created a new page, you may wish to check out how it looks in your regular 
Web browser before you publish it to your site. 


To preview a draft in your regular Web browser, choose File™Preview or use 
the keyboard shortcut F12. Your regular Web browser (such as Internet 
Explorer) opens and displays the page you’re editing. 


Uploading (Publishing) a Page 


When you’ve finished editing a page or creating a new one, you’ll want to put 
it on your Web site where people can browse to it — that is, if you don’t 
want to preview the page (see the preceding section, “Previewing Your 


Working Offline 521 


Work”) and you don’t need approval to post the page (see “Collaborating,” 
later in this chapter). In Contribute, uploading the page to your Web server, 
where it can be seen by any visitor who goes to the right URL, is known as 
publishing a draft. 


Publishing a draft is incredibly simple: Just click the Publish button at the 
top left of Contribute’s Browser. The page and any images or Flash movies 
you’ve added to it are uploaded to the server, and Contribute’s Browser 
automatically switches to Browse mode to display the uploaded page as it 
will appear to visitors to your site. 


Working Offline 
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Figure 2-14: 
Working 
offline. 





Unless you tell it otherwise, Contribute maintains an open connection to the 
server that hosts your Web site. If you prefer not to have a connection open 
the whole time you’re working, you have the option to work offline. Simply 
select File®Work Offline. The Contribute Browser shows that you are work- 
ing offline. 


When you create a new page offline, the Work Online button appears instead 


of the Publish button, as shown in Figure 2-14. To reconnect to your site, 
simply click the Work Online button. 


Work Online button 
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Collaborating 


Contribute has several features that make collaborating on a site easy. For 
example, when you edit a page, Contribute prevents anyone else from edit- 
ing the page at the same time. That way, you never accidentally overwrite 
someone else’s changes — and they never overwrite yours! 


If you need approval before you publish a draft, Contribute 3 offers you two 
methods for submitting the draft to a colleague: 


+ Email Review: Contribute uploads a copy of your draft to a hidden part 


of your Web site, and you send an e-mail to your colleague with a link to 
the hidden page. When you get approval, you publish the page. 


+ Send Draft for Review: Contribute makes the hidden page available to 


your colleague(s) so they can review and publish it. 


To make a preview of your draft and send an e-mail to a colleague with a link 
to the preview, just follow these steps: 


1. 


While you’re in Edit mode on the page you want to show to your col- 
league, click the Send for Review button in the Browser. 


The Send for Review window appears. 


2. Select Send E-mail with a Link to a Preview of the Draft. 


3. Click the Send button. 


An e-mail appears with a message to the person you're asking to review 
your work. 


4. Edit the e-mail if necessary, and then send it. 


5. If you think you may have to wait awhile for approval, save the draft 


by clicking the Save for Later button at the top of the Browser. 


The draft appears in the Pages panel. 


. When you have approval, click the draft’s name in the Pages panel. 


The Browser switches to Edit mode and loads the draft in the Browser. 


. Click Publish. 


The Browser switches to Browse mode and displays the published page 
as it appears on your Web site. 
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To send a draft of the page to a colleague for review and publishing, just Book V 
follow these steps: Chapter 2 


1. While you’re in Edit mode on the page you want to show your col- 
league, click the Send for Review button in the Browser. 
The Send for Review window appears. 

2. Select Send the Draft to Another Contribute User. 


sioynqijuoy 
10} soilseg 


A list of users and groups becomes available. 
3. Click to select a recipient or multiple recipients. 


Press the Shift key to make multiple contiguous selections from the list; 
press the Ctrl key and click to make multiple noncontiguous selections. 


4. If the page is a new draft of an existing page, you can enter a descrip- 
tion of the changes you’ve made. 


This step is optional. 


5. If you want to send an e-mail notifying your colleague(s) of your 
request, leave the Notify Recipients Through E-mail option checked 
and proceed to Step 6. 


Otherwise, uncheck the box and click Send. Depending on your setup, 
the Send New Page or Send Linked New Files dialog box may appear. You 
can rename your draft(s) and navigate to a directory to copy the drafts 
into. A window appears to confirm that your draft has been sent for 
review (unless you have previously checked the Don’t Show Me This 
Message Again check box). 


6. Edit the e-mail if necessary and send it. 


The e-mail opens in your default e-mail program. After you send it, 
Contribute updates to show the latest draft in the Draft Console. If you 
wish to cancel the review request, click the Undo Send button. 
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Chapter 3: Contribute 3 
Administration 


In This Chapter 


1” Making yourself a site administrator 
Making general settings, including rollbacks 
Working with users and roles 

Revising role settings 

Utilizing shared assets 


Creating connection keys 


Í you're set up in the role of Contribute 3 site administrator, you can do 
everything a regular user can do — edit existing pages and make new 
ones — but you also control who the regular users are, what access they 
have to a site, and more. 


A site may have multiple administrators as well as multiple users. All admin- 
istrators have the same privileges, including the privilege to set up groups 
of users in roles with distinct privileges. If reading that last sentence makes 
you feel like you’ve just stumbled into a hall of mirrors, don’t worry. Read 
on, and you'll be a site administrator in no time. 


Setting Vourself Up as Site Administrator 


MBER 


You can set yourself up as an administrator, or you can set someone else up 
as an administrator. But first things first: If you want to make site adminis- 
trators of your colleagues, you have to make yourself a site administrator 
beforehand. By the way, if you want to be an administrator on a site that 
already has one, you need that site’s administrator to set you up in a role 
with administrator privileges. 


Though you may be able to set yourself up as site administrator at any time 
by editing your settings, we assume for the purposes of this book that you 
are setting yourself up as an administrator at the same time you are making 
your first connection to the site in Contribute, and that nobody else has yet 
done so. To set yourself up as an administrator, just follow these steps: 
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1. Browse to the site via Contribute’s Browser by typing or pasting a URL 
(for example, http: //www.MySite.com) into the Address text field. 


2. Press Enter or clicking the Go button. 


The Contribute Browser takes you right to your site. 














MBER 
D You can use Contribute’s Browser to view any site on the Web, but you 
can only set up a connection to a site if you have File Transfer Protocol 
(FTP) information for that site. 
3. Click the Create Connection button at the top left of the Browser, as 
shown in Figure 3-1. 
The Connection Wizard opens to its Welcome screen. 
(QW Create Connection | | da Back GB stoo O) Refresh G, Hone Pages C 
| Address: | betpojivavw.wertzatena.comargyl! x Ece Phs.. 
| A You ara viano a page on a wabske thet you havent created è conmaction to, 
Figure 3-1: 
Getting 
ready to 
connect to a 
Web site. 


























4. We’re assuming you don’t have a connection key, so click the Next 
button at the bottom of the wizard. 


The Website Home Page screen appears. For more information about 
connection keys, see the “Creating Connection Keys to Provide Access 
to Contributors” section, later in this chapter. 


5. If necessary, enter the URL (http: //www.MySite.com, for example) 
for the Web site you'll be editing by typing or pasting it into the text 
field. Click Next. 


Figure 3-2: 
FTP 
information 
entered in 
the 
Connection 
Information 
screen. 








Ta. 


7b. 


Te. 
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The URL should be there already, because you browsed to the site to 
start the connection process. When you click Next, the Connection 
Information screen appears in the wizard. 


. Select a connection method from the drop-down list. 


You have the following options: FTP, Secure FTP (SFTP), and Local/ 
Network. Depending on what you choose, different text fields appear 
below the drop-down list. As you can see in Figure 3-2, we entered SFTP. 


If you selected FTP or SFTP, enter the FTP server name (such as 
sftp.earlsbowlateria.com), login, and password in the respective 
text fields. Click Next. 


The login is sometimes called the username. When you click Next, 
Contribute tests the connection and then the User Information screen 
appears. 


If you selected Local/Network, enter the network path (for example, 
\\mynetwork\mydepartment \site) by typing it, pasting it, or click- 
ing the Choose Folder button and going to the folder that contains 
your site. Click Next. 


When you click Next, Contribute tests the connection and then the User 
Information screen appears. 


If you selected WebDAV, enter the URL, username, and password that 
you use to connect to the site under WebDAV. 


When you click Next, Contribute tests the connection and then the User 
Information screen appears. 





Connection Wizard 


Connection Wizard y 
vi 


Connection Information 


What is the SETP login? 
bubba 


What is the SFTP password? 





Help [<Back || Net» _} [_ Cancel 


To edit pages on your website, Contribute needs to connect to your web server. 


How do you connect to your web server? 
Secure FTP (SFTP) v| | Advanced 
What is the name of your SFTP server? 


sftp earlsbowlateria com (Examele: fip.mpste.com) 
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8. Enter your name in the What Is Your Full Name? text field. 


Your name may already appear. The name in this field identifies you to 
other contributors to your site, if there are any. 


9. If it’s not already there, enter your e-mail address in the What Is Your 
E-mail Address? text field and click Next. 


The Summary screen appears. 
10. Click Done. 
The Connection Wizard closes. 


11. Choose Edit*>Administer Website Name of Site, where Name of Site 
is the site you want to administer. 


Contribute connects to the site, and a Contribute window opens. 
12. Select either Standard Word Processing or Dreamweaver-style editing. 


These options affect the code that Contribute writes but do not affect 
the Contribute user’s editing experience. 


13. Click the Yes button, indicating you would like to become the site’s 
Contribute administrator. 


The Administer Website window opens to the Users and Roles screen, 
with Administrator selected by default; see Figure 3-3. Your name may 
appear under Administrator. 


14. Click Administration in the list on the left. 
The Administration screen appears on the right. 
15. Enter a contact e-mail address as needed. 


The contact e-mail address appears when Contribute throws a Contact 
your administrator error message to a user. 


16. Click the Set Administrator Password button. 
The Change Administrator Password window appears. 


17. Enter a password in the top text field of the Change Administrator 
Password window. 


18. Re-enter the password in the text field below, exactly as you typed it 
above. Click OK. 


Ro You can use any combination of numbers and letters for your password. 
V The password is case sensitive (so as far as the password is concerned, a 
big S and a small s are different characters). Only contributors who 
know that password can perform administrator functions on the site. 
When you click OK, the window closes. 





Figure 3-3: 
The 
Administer 
Website 
window 
centralizes 
all your site 
administra- 
tion options. 
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You are now the site administrator. You can click the Close button or set Book V 
options for users on the other screens of the Administer Website window. To Chapter 3 
find out about those other screens, read on. 








a0 
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= 3, 
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New Pages Users who have connected: = 
Compatibility [EB Administrator 
> Andrew J. Cowitt 
E Publisher | © create New Role... 
A Wrter 
Send Connection Key... _| 
i ) To centrally manage user access without sending connection key 
g” fles, enable the User Directory publishing service, 
| Help | [ Close 
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General settings apply to all site contributors, regardless of any role settings 
you make. (We deal with roles settings later in this chapter.) Using the 
Administer Website dialog box, shown in Figure 3-4, you can 

+ Change the administrator’s e-mail address and password 

+ Enable Contribute Publishing Services 

+ Set up index and URL mapping 

+ Enable rollbacks and customize rollback settings 

+ Establish default encoding and file extension settings for new pages 
added by users 


+ Delete all permissions and settings at once 
We discuss each of those settings in the following subsections. 
a a a J a 
Changing the administrator’s e-mail address 
To change the administrator’s e-mail address, just follow these steps: 


1. Choose Edit*>Administer Websites>Name of Site, where Name of Site 
is the site you want to administer. 
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Figure 3-4: 
Preparing to 
change the 
Adminis- 
trator 
Password. 





If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen. Skip to Step 3. 


. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears. 


. Click Administration in the list on the left. 


The Administration screen appears on the right. 


. Select the existing administrator e-mail address by clicking and drag- 


ging until the address is highlighted. 


. Enter a new address by pasting or typing it into the Administrator 


Contact E-mail text field. 


. Click Close. 


The Administer Website dialog box disappears, and the new e-mail 
address is set. 





| Help | 








Administer Website - http:/www.argylladventuretree.com/! 


administrator for help. 


Set Administrator Password... 


Set the password required to select the Administrator role in the 
Connection Wizard, 


Remove Administration | 


Remove all shared settings from this webske 


Users and Roles Administration 
Administration 
Publishing Services a 
od tact email address: 
Web Server Pane ssid 
Rolbacks argyll@argylladventuretree.com 
New Pages F " - z 
Compatibility Contribute displays this address in error messages so that users can contact an 





Changing the Administrator password 


To change the Administrator password, follow Steps 1 through 3 in the previ- 


ous section, and then do the following: 


1. Click the Set Administrator Password button. 


The Change Administrator Password dialog box appears. 


2. In the top field, enter your current Administrator password. 
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3. Press the Tab key or click in the second field and enter the new pass- 
word you would like to use. 


4. Press the Tab key or click in the third field and re-enter the new pass- 
word exactly as you entered it in the second field. 


5. Click OK. 


The Change Administrator Password dialog box closes. If you wish to 
make changes to other settings, do so. Otherwise, click Close to close 
the Administer Website dialog box and save your changes. 


Setting up Contribute Publishing Services (CPS) 


Contribute Publishing Services (CPS) is a scalable, extensible server applica- 
tion that can add administrative capabilities to Contribute while integrating 
with your existing Active Directory or LDAP setup. CPS logs all publishing 
activities on Web sites and offers administrators centralized control over 
user access. If you’re having trouble understanding the terminology in this 
paragraph, ask for help from your IT Director. 


You must install and configure CPS before you can enable it from the 
Administer Website dialog box. For information on installing and configuring 
CPS, see your documentation. 


To enable CPS, follow these steps: 
1. Choose Edit™Administer Websites> Name of Site where Name of Site 


is the name of the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 3. 


2. Enter your password and click OK or press Enter. 
The Administer Website dialog box appears. 
3. Click Publishing Services in the list on the left. 
The Publishing Services screen appears on the right. 
4. Click the Enable Publishing Services button. 
The Enable Publishing Services dialog box appears. 
5. Enter the URL for Publishing Services. 


6. Leave Enable User Directory checked if you want to use Contribute’s 
ability to authenticate users and manage the Web site connection. 
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7. Click OK. 
The Enable Publishing Services window closes. 


8. Perform further administrator tasks or click Close to save your set- 
tings and close the Administer Website dialog box. 


Establishing Web server settings 


In some cases, the way your Web server is configured to retrieve index pages 
may require you to adjust some settings in Contribute to get your connec- 
tions between Contribute and the server working properly. The Web Server 
pages in the Administer Website dialog box offer you the ability to customize 
index page and URL mapping, and to change from the default guard page (a 
hidden file that Contribute uses to control access to drafts and administra- 
tive files). 


Mapping to alternate Web site addresses 

If you have multiple domain name system (DNS) entries pointing toward a 
single Internet protocol (IP) address — that is, if http: //www.Earls 
Bowlateria.com and http://www.Earls-Bowlateria.com, for example, 
both point to the same Web server — or if your contributors access your 
Web server using different addresses — from the Web and from your internal 
network, for example — you need to set up Contribute to recognize the addi- 
tional addresses. Luckily, doing so is simple. 








To map Contribute to an alternate Web site address, just follow these steps: 
1. Choose Edit~™Administer Website™Name of Site where Name of Site 
is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 3. 


2. Enter your password and click OK or press Enter. 
The Administer Website dialog box appears. 
3. Click Web Server in the list on the left. 


The Web Server screen appears on the right, open to the Web 
Addresses tab. 


4. Click the Add button. 

The Add or Edit Alternate Address dialog box appears. 
5. Enter the URL(s) in the Alternate Addresses text field. 
6. Click OK. 


MBER 
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The Add or Edit Alternate Address dialog box disappears, and the addi- 
tional address appears highlighted at the bottom of the list. 


7. Make any other changes to the Web server settings, if necessary, and 
click Close. 


This saves your settings and closes the Administer Website dialog box. 
To edit or delete an alternate Web site address, do the following: 


1. Follow Steps 1 through 3 in the previous list to open to the Web 
Addresses tab of the Web server pages of the Administer Website 
dialog box. 


2. Click the address you want to edit or delete. 


The address is highlighted. Now you can perform one of the following 
actions: 


e To edit the address, click the Edit button. The Add or Edit Alternate 
Address dialog box appears, with the address highlighted. Edit the 
URL in the Alternate Website Address text field and click OK to close 
the Add or Edit Alternate Address dialog box. 


e To delete the address, click the Remove button. The address disap- 
pears from the dialog box. 


3. Make any other changes to the Web server settings, if necessary, and 
click Close. 


This saves your settings and closes the Administer Website dialog box. 


Mapping to index files 

Assume your server is configured to default to home pages in a non-stan- 
dard way. For example, the server first checks a directory for start.cfm 
and then looks for index.htm if it doesn’t find start .cfm. You can set up 
Contribute to mirror that configuration. 


Contribute has 30 possible index page filenames listed (index and default, 
for each of 15 extensions). If your server is configured to look for a page with 
a different filename (such as start.cfmormain.htm1), you need to add 
that filename to the list. 


To add a filename to the list, just follow these steps: 
1. Choose Edit@Administer Website>Name of Site where Name of Site 


is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 3. 
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Figure 3-5: 
Contribute 
looks for 
pages on 
the server 
in the 
order the 
filenames 
appear in 
the Index 
Files list. 


. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears. 


. Click Web Server in the list on the left. 


The Web Server screen appears on the right, open to the Web 
Addresses tab. 


. Click the Index Files tab. 


The Index Files page appears. 


. Click the Add button. 


The Add or Edit Index Filename dialog box appears. 


6. Enter the filename in the Index Filename text field. 
7. Click OK. 


The Add or Edit Index Filename dialog box disappears, and the new file- 
name appears at the bottom of the list in the Index and URL Mapping 
dialog box. 


. Use the arrow buttons at the right to move the new filename to the 


spot in the list that reflects the order the server uses. 


For example, if the server checks index.htm first, that filename should 
be at the top of the list (as it appears in Figure 3-5). Each time you click 
the up-arrow button, the selected name moves up one spot in the list. 


. Make any other changes to the Web server settings, if necessary, and 


click Close. 


This saves your settings and closes the Administer Website dialog box. 
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Compatibility 
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This list specifies the flenames that your web server uses when looking 
for a default index page in a directory. The order of the Ist is the order in 
which Contribute looks for index fles when browsing a directory URL. 
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To edit or remove a filename from the list, just follow these steps: 


1. Follow Steps 1 through 4 in the previous list to open to the Index Files 
tab of the Web Server pages of the Administer Website dialog box. 


2. Click the filename you want to edit or remove. 
The filename is highlighted. 


e To edit the filename, click the Edit button. The Add or Edit 
Filename dialog box appears, with the current filename highlighted. 
Type a new filename and click OK. The Add or Edit Index Filename 
dialog box closes, and the edited filename appears in the list. 


¢ To remove the filename from the list, click the Remove button. The 
filename disappears from the list. 


3. Make any other changes to the Web server settings, if necessary, and 
click Close. 


This saves your settings and closes the Administer Website dialog box. 


Using the Rollback feature to save file backups 


Contribute’s Rollback feature allows contributors to roll back to a previously 
published version of a page. You’ll find this useful because reverting to a 
prior state of things is sometimes the best way out of a jam. To make it pos- 
sible to roll back, Contribute keeps backup copies of edited pages on the 
Web server. Administrators can specify how many versions Contribute backs 
up. Administrators can also disable the Rollback feature. 


The main advantage to the Rollback feature is pretty obvious: Backups can 
help you recover quickly if a newly published version of a page has multiple 
errors. Rather than having to scramble to fix the errors while the world sees 
your faulty page, you can just roll back almost instantaneously to the previ- 
ously published version of the page. It’s less likely you’ll end up in a Rollback 
scenario if your draft has gone through the review process (see Book V, 
Chapter 2 for details on the review process). 


The major disadvantage of the Rollback feature, particularly for large sites, 
is that backups take up space on the Web server. If you have Contribute set 
to save three versions of each page, for example, by the time your colleagues 
have published changes to 100 pages, 300 backup pages have been created 
and stored in the _baks directory that Contribute has placed on the Web 
server that contains your site. 


To activate and customize the Rollback feature, just follow these steps: 


1. Choose Edit@Administer Website>Name of Site where Name of Site 
is the site you want to administer. 
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If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 3. 


2. Enter your password and click OK or press Enter. 
The Administer Website dialog box appears. 

3. Click Rollbacks in the list on the left. 
The Rollbacks screen appears on the right. 

4. Click the Enable Rollbacks check box. 


A check appears in the check box, and the text field below is no longer 
grayed out. 


5. Use the toggle buttons at the right of the text field to increase the 
number of backups from 0, or double-click the 0 and enter a whole 
number between 1 and 99. 


Though you may elect to keep up to 99 versions of each page, you’re 
probably better off limiting the number to 2 or 3 to conserve space on 
your Web server. 


6. Make any other changes, and click Close. 
This saves your changes and closes the Administer Website dialog box. 
To disable rollbacks, follow Steps 1 through 3, uncheck the Enable Roll- 
backs check box, and click Close. Disabling rollbacks does not remove exist- 
ing backups. To remove existing backups, disable rollbacks, and then use 


Dreamweaver or your favorite FTP client to delete the files. Do not delete 
the _baks folder. 


Setting New Pages defaults 


You can use the New Pages screen of the Administer Website dialog box to 
set the default encoding and file extension for any new page generated by a 
user. To set New Pages defaults, just follow these steps: 


1. Choose Edit@Administer Websites® Name of Site where Name of Site 
is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 3. 


2. Enter your password and click OK or press Enter. 
The Administer Website dialog box appears. 

3. Click New Pages in the list on the left. 
The New Pages options appear on the right. 
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4. Select a Default encoding from the drop-down list. Book V 


5. Enter a file extension in the Default File Extension text field. Chapters 


6. Make any other changes and click Close. 


> 
This saves your changes and closes the Administer Website dialog box. S S 
Deleting all permissions and settings at once 2.8 
5 


ay? The Administration page of the Administer Website dialog box includes a 
button that allows you to delete all your custom sitewide settings and roles 
(formerly known as permission groups) with a single click. You might find it 
efficient to delete all the settings at once if your company or your Web site 
has just gone through a massive reorganization. 


Ry If you click this button, then you nullify all restrictions you may have placed 
on any of your contributors. This means that all contributors have standard 
user access to all files on your site. It also means if you have an elaborate 
array of restrictions and roles, and you change your mind the next day, you 
have to re-create all those settings from scratch. 


To delete all your sitewide settings and roles, simply click the Remove 
Administration button in the Administration page of the Administer Website 
dialog box. A Warning dialog box appears to give you a chance to back out. If 
you’re sure you want to delete the settings, click Yes. Then click Close in the 
Administer Website dialog box. 


Setting Up Users and Roles 


After you have designated yourself as an administrator, you have access to 
the Administer Website dialog box, in which you can do things like configure 
general settings, send connection keys, and more. 


When you set up a connection, Contribute automatically creates three 
default roles for contributors: Administrators, Publishers, and Writers. By 
default, users in all three roles may edit and create new pages, but only 
administrators and publishers can publish pages. You can set up as many 
additional roles as you like; each role might have different new page-creation 
permissions or access to different directories on the site, or other settings 
and permissions. 


Opening the Administer Website dialog box 


To open the Administer Website dialog box for a site to which you have 
administrator access, simply do the following: 


1. Choose Edit’Administer WebsiteName of Site where Name of Site 
is the site you want to administer. 
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If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open the 
Users and Roles screen. 


2. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears, open conveniently to the 
Users and Roles screen. 


Setting up a new role 


If you don’t need more than one set of users and one set of administrators, 
you can skip this section. 


If you’re creating a new role whose settings largely overlap with an existing 
role’s, you can duplicate the existing role, and then edit the duplicated role’s 
settings as necessary. In fact, in Contribute 3, all new roles must be created 
this way. To create a new role by duplicating an existing role, just follow 
these steps: 


1. Open the Administer Website dialog box by following the steps 
described in the earlier section, “Opening the Administer Website 
dialog box.” 


2. Click the Create New Role button in the Users and Roles page of the 
Administer Website dialog box. 


The Create New Role dialog box appears. 
3. Select an existing role from the list at the top. 


4. Enter a name for the new role in the Name of New Role field and click 
OK or press Enter. 


The Create New Role dialog box closes. The new role’s name is high- 
lighted in the Administer Website dialog box, as shown in Figure 3-6, 
where we added a role called “Communications Dept.” If you want to 
edit that role’s settings, just click the Edit Role Settings button. The 
“Editing Role Settings” section, later in this chapter, details the settings 
you can make. 


Deleting roles 


Deleting a role is easy. Simply follow these steps: 


1. Open the Administer Website dialog box by following the steps 
described in the earlier section, “Opening the Administer Website 
dialog box.” 


2. In the Users and Roles page of the Administer Website dialog box, 
click the name of the role you want to delete. 


The role name is highlighted. 





Figure 3-6: 
The new 
role, “Com- 
munications 
Dept.,” is 
highlighted 
in the 
Administer 
Website 
dialog box. 
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3. Click the Remove button. 


A dialog box pops up, warning you that you are about to remove a role. 


4. Click Yes to remove the role. 


The Warning dialog box closes and the role’s name disappears from the 


Administer Website dialog box. 


Editing Role Settings 


After you’ve created a role (or decided to go with the default Administrators, 
Publishers, and Writers), you can adjust the permissions granted to the 
users who perform that role. Permissions may be wholesale (contributors in 
the Writers role may upload any images) or conditional (Writers may upload 
images, but only if the images’ file sizes are smaller than 32 kilobytes, for 


EMBER 
D 


example). 


Unlike general settings, role settings apply only to individual roles, not to all 
roles. Each role may have its own permissions or settings in the following 


areas: 


+ General 


+ Folder/File Access 


+ Editing 
+ Styles and Fonts 
+ New Pages 
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+ File Placement 
+ Shared Assets 


+ New Images 


We discuss each of the areas in detail in the following subsections. 


Making general settings 

When you open the Role Settings dialog box, you see the General screen by 
default. The General options allow you to make three types of settings for a 
role: 


+ Publish Permission: Give or deny users in the role permission to pub- 


lish pages to the Web site. 


+ Role Description: A sentence or two that describes the role. The Role 


Description is what people see when they click the role name in the 
Connection Wizard. 


+ Role Home Page: The page that loads when users assigned to the role 


connect to the Web site in Contribute. 


To create general settings for a role, follow these simple steps: 


1. 


Choose Edit™Administer Websites> Name of Site where Name of Site 
is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 3. 


. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears, open conveniently to the 
Users and Roles screen. 


. Click to select the role for which you want to edit settings. 


The role is highlighted. 


. Click the Edit Role Settings button. 


The Edit Role Settings dialog box appears, with the name of the role and 
Web site in the title bar. 


. Click the Allow Users to Publish Files check box if you wish people in 


the selected role to be able to publish files to the Web site. 


If there’s no mark in the check box, users in the selected role will have to 
send drafts to someone with publishing permission. 


. Enter a role description by typing or pasting it into the Role 


Description text field. 


«e 


ar 





Figure 3-7: 
The Com- 
munications 
Depart- 
ment’s 
General 
settings. 
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Note that if you have checked the Allow Users to Publish Files check 
box, you’ll probably want to change the default role description. 


7. Click and drag to select the current role home page and enter a new 
URL by typing or pasting it into the Home Page for Users in This Role 
text field. 


Alternatively, you can click the Choose button at the right and navigate 
to the page in the Choose File on Website dialog box. 


One advantage of navigating via the Choose File on Website dialog box is 
that you avoid the possibility of misspelling the URL. 


8. Make other changes to the role’s permissions as needed, and click OK. 


If your Web site has several directories, each of which is maintained by a dif- 
ferent department, you can make a role for each department and set a default 
home page for each role. For example, members of the Communications 
Department, who are responsible only for updating press releases, might 
have http://www. argylladventuretree.com/news/index.htmas 
their home page. See Figure 3-7. 
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Granting access to folders and files 


You may wish to restrict certain groups of contributors from editing particu- 
lar files on your site. For example, you may want the members of your 
Communications Department to be able to update the News section of your 
site but not have access to the Products section. Contribute allows you to 
specify which folders (directories) a user in a particular role may access to 
edit the files within. Gee Figure 3-8.) 
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To grant a role access to the files in a particular folder that already exists on 
your site, just follow these steps: 


1. If you have the Edit Role Settings dialog box open already, skip to 
Step 5. Otherwise, continue with Step 2. 


2. Choose Edit>Administer Website> Name of Site where Name of Site 
is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 3. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 4. 


3. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears, open conveniently to the 
Users and Roles screen. 


4. Click to select the role for which you want to edit settings. 
The role is highlighted. 
5. Click the Edit Role Settings button. 


The Edit Role Settings dialog box appears, with the name of the role and 
Web site in the title bar. 


6. Click Folder/File Access in the list on the left. 


The Folder/File Access screen, as shown in Figure 3-8, appears, replacing 
the General screen. 


7. Select the Only Allow Editing Within These Folders option. 
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If a dialog box asks if you’d like Contribute to add a folder automatically 
to the list, click OK. The dialog box disappears and the Allow Editing 
Within These Folders text field becomes editable. 


8. Click the Add Folder button. 


The Choose Folder dialog box appears, with your site’s directory struc- 
ture represented on the left. 


9. Double-click the folder you want the role to be able to edit, and then 
click Select folder name where folder name is the name of the folder. 


The Choose Folder dialog box disappears, and the URL for the folder 
you selected appears in the Folder Access text field, as shown in 
Figure 3-8. 


10. Make other changes to the role’s permissions as needed, then click OK. 


Extending file deletion privileges 

The Folder/File Access screen in the Role Settings dialog box also allows you 
to choose whether a role is permitted to delete files from the site. Users ina 
given role can delete only files that they have permission to edit. 


To allow users to delete files from a site, follow these simple steps: 


1. If the Folder/File Access screen in the Edit Role Settings dialog box is 
not already showing, open it by following Steps 2 through 5 in the 
previous list. Otherwise, go on to Step 2 in this list. 


2. Select the Allow Users to Delete Files They Have Permission to Edit 
check box at the top of the File Deletion section of the dialog box. 
The Remove Rollback Versions on Delete check box becomes available. 


3. (Optional) If you want rollback files for a page to be deleted when 
that page is deleted, select the Remove Rollback Versions on Delete 
check box. 


4. Make other changes to the role’s permissions as needed, then click OK. 


Customizing editing settings 

The Editing options in the Edit Role Settings dialog box, shown in Figure 3-9, 
allow you to set what aspects of a page’s underlying HTML code a role can 
edit. It also allows you to specify how Contribute writes some basic HTML 
formatting code. 
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Figure 3-9: 
The Editing 
options 
make it easy 
to customize 
editing 
settings. 
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Setting general editing restrictions 


Dreamweaver templates “lock” certain chunks of code so that people editing 
pages based on those templates cannot change certain aspects of the way 
the page is built. This preserves the structure and look of the page. (For 
details on creating Dreamweaver templates, see Book II, Chapter 7.) 


If you’re not using Dreamweaver templates but you still want to protect 

any specialized code (ColdFusion markup, for example) from being edited, 
make sure the Protect Scripts and Forms check box in the General Editing 
Restrictions section is selected. (The Allow Unrestricted Editing option is 
selected by default; if you want to allow everything on the page to be edited 
except scripts and forms, the Allow Unrestricted Editing option must be 
selected before the Protect Scripts and Forms check box can be selected). 


If you want users in the selected role to be unable to insert images or edit 
them using Contribute’s new inline image-editing capabilities, select the 
Prevent Users from Inserting Images check box. 


If you want users in a role to be able to edit and format text only, select the 
Only Allow Text Editing and Formatting option. 


Setting the Paragraph Spacing option 

When you're writing text in a regular word-processing program (such as 
Microsoft Word) and you press the Enter key on your keyboard, your cursor 
goes to the next line, just as a carriage return works on a typewriter. When 
you press Enter to go to a new line in a WYSIWYG (What You See Is What You 
Get) HTML editor like Dreamweaver, a blank line is inserted between the 
previous line you were on and the new line. You can set up Contribute to 
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function either like a word processor or like Dreamweaver when a contribu- 
tor presses the Enter key. 


It’s not just Contribute’s behavior that changes when you change this set- 
ting, it’s also the underlying HTML code that Contribute generates. When 
you select the One Line option in the Paragraph Spacing section, Contribute 
generates an inline CSS style to create the line break. When you select the 
Two Lines option, Contribute uses the standard HTML paragraph tag <P> to 
create the line break. 


To set up Contribute to start a new line of text directly under the old one 
when a contributor presses the Enter key, select the One Line, As in 
Standard Word Processors (Uses Inline CSS Styles) option. 


To set Contribute to start a new line of text two lines down from the old line, 
leaving a space in between, select the Two Lines, As in Web Page Editors 
(Uses Standard <P> Tags) option. 


Setting other editing options 

In the Other Editing Options section of the Editing screen, the Use <STRONG> 
and <EM> in Place of <B> and <I> option is selected by default. Leave it as is 
if you want Contribute to use the latest HTML tags for bold and italicized 
text. 


Select the Allow Users to Insert Third-party Objects option if you want users 
in the selected role to be able to insert Google and PayPal extensions into 
pages. (See Book V, Chapter 4 for a discussion of the extensions.) 


Select the Allow Multiple Consecutive Spaces (Uses &nbsp;) option to enable 
contributors to create horizontal space in a page by inserting multiple 
spaces. 


Select the Require ALT Text for Images option if you want Contribute to 
prompt contributors to include information that makes the page more 
accessible to visitors who are visually impaired. 


To choose a line break type for the underlying code (not the text as it 
appears in a browser), select from the Line Break Type drop-down list. In 
most cases, you may leave this at its default setting; if the people working 
directly on the HTML use a particular type of computer, you may wish to 
select the line break type accordingly. CR stands for Carriage Return, and LF 
is short for Line Feed. Contribute offers the following line break types: 


+ Windows (CR LF) 
+ Macintosh (CR) 
+ UNIX (LF) 
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Figure 3-10: 
The Styles 
and Fonts 
screen of 
the Edit Role 
Settings 
dialog box 
allows you 
to limit text 
formatting 
options by 
removing 
menus from 
Contribute’s 
Browser. 





Granting styles and fonts permissions 


To change the permissions for a role’s ability to format text on Web pages, 
click Styles and Fonts in the list on the left side of the Role Settings dialog 
box; see Figure 3-10. Formatting text is usually one of the main responsibili- 
ties of anybody maintaining a Web site. Contribute makes formatting text 
easy as it is; setting styles and fonts permissions can make formatting text 
even easier for contributors by taking away options that might lead to incor- 
rect formatting. 
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Setting styles options 


By default, contributors are permitted to apply CSS styles and HTML para- 
graph and heading styles to text on pages they have permission to edit. The 
Style Support drop-down menu allows you to prevent users from applying 
any styles to the text by selecting the Don’t Allow Users to Create Styles 
option. If you select that option, the rest of the Styles and Fonts options 
disappear. 


If you don’t want contributors to be able to apply CSS styles but you do want 
them to be able to apply styles to <P> tags and to insert header tags (<H1>, 
<H2>, and so on), deselect the Include CSS Styles in the Style Menu check 
box, but leave the other two check boxes selected. 


If, on the other hand, you have set up a thorough CSS style sheet and don’t 
want contributors using generic HTML paragraph and heading styles to 
format text, deselect the Include HTML Heading Styles (<H1>,...) in the 
Style Menu check box, but leave the other two check boxes selected. 
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Note that with Contribute 3, you can limit the styles that appear in the 
Contribute Browser’s toolbar to those that appear on a specific style sheet. 
Simply select the Show Only CSS Styles Included in This CSS File option and 
input the pathname or URL of the style sheet, or click the Choose button and 
browse to the style sheet. 


Setting fonts options 

When the Allow Users to Apply Fonts and Sizes (Displays the Font and Size 
Menus) check box is selected, as it is by default, contributors can format 
text by choosing a font face and size from drop-down lists on the Contribute 
Browser’s toolbar. 


If you’re using a CSS style sheet that includes font face, size, color, and other 
attributes for all text on your site, deselect the Allow Users to Apply Fonts 
and Sizes check box and make sure the Include CSS Styles in the Style Menu 
check box is selected. 


If you want to allow contributors to apply text formatting, and you want 
Contribute to generate basic HTML <FONT> tags, just follow these steps. 
This assumes you have the Styles and Fonts options of the Edit Role Settings 
dialog box showing. 

1. Select HTML Tags from the Style Support drop-down menu. 


2. Select the Allow Users to Apply Fonts and Sizes (Displays the Fonts 
and Size Menus) check box, if it isn’t already selected. 


This box is selected by default. 
3. Select the Include HTML Heading Styles option. 
4. Edit the settings as necessary. 


By default, users are permitted to apply fonts and sizes, bold, italics, 
underline, strikethrough, and fixed-width styles, and to edit font and 
background colors. 


5. Make other changes to the role’s permissions as needed, then click OK. 
If you want to allow contributors to apply text formatting, but you want 
Contribute to generate CSS-style code instead of HTML <FONT> tags, just 
follow these steps. This assumes you have the Styles and Fonts options of 
the Edit Role Settings dialog box showing. 

1. Select Document-Level CSS from the Style Support drop-down menu. 


2. Select the Allow Users to Apply Fonts and Sizes check box, if it isn’t 
already selected. 


This box is selected by default. 
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3. Select the Include CSS Styles in the Style menu option. 


For more details on this option, see “Setting styles options,” earlier in 
this chapter. 


4. Select Allow Users to Apply Fonts and Sizes, as needed. 


If you want users to be restricted to font faces and sizes as defined in 
your style sheets, deselect this check box and skip to Step 6. 


5. Select a unit of font measurement from the Apply Sizes Using drop- 
down list. 


The choices are Pixels, Points, or Ems. Whichever you choose is avail- 
able from a drop-down list in the Contribute Browser. 


For information about the relative advantages and disadvantages of 
using each of the units of font measurement, browse to Mulder’s style 
sheet tutorial at the Webmonkey Web site (webMonkey .wired.com/ 
webmonkey/98/35/index2a.html?tw=authoring). 


6. Edit other settings as necessary. 


You can allow users to apply custom text formatting, font color, and 
background color to pages, or restrict users to options in your style 
sheet. 


7. Make other changes to the role’s permissions as needed, then click OK. 


Granting permission to create new pages 


Chances are, your contributors are going to need to create new pages for 
your Web site. If your company paid good money to have the site profession- 
ally designed, however, you probably don’t want the people maintaining 
your site to fashion pages that diverge from the approved design. 


Contribute gives administrators a way to force contributors to use 
Dreamweaver templates (the safest bet) or to use existing pages to create 
new ones. That helps keep the site design uniform and saves time for the 
people maintaining the site, as well. 


To control the types of Web pages contributors can create, just follow these 
steps: 


1. If you have the Edit Role Settings dialog box open already, skip to 
Step 5. Otherwise, continue with Step 2. 


2. Choose Edit>Administer Websites> Name of Site where Name of Site 
is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 3. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 4. 





Figure 3-11: 
Setting the 
permissions 
for a role’s 
ability to 
create new 
Web pages. 
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3. If the Administrator Password dialog box appears, enter your pass- 
word and click OK or press Enter. 


The Administer Website dialog box appears, open conveniently to the 
Users and Roles screen. 


4. Click to select the role for which you want to edit settings. 
The role is highlighted. 
5. Click the Edit Role Settings button. 


The Edit Role Settings dialog box appears, with the name of the role and 
Web site in the title bar. 


6. Click New Pages in the list on the left. 


The New Pages screen replaces the General screen, as shown in 
Figure 3-11. 
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7. If you want roles to have the option of creating a page from scratch, 
select the Create a Blank Page check box. 


If you don’t want users to be able to create a page from scratch, deselect 
the check box. This check box is selected by default. 


8. If you want roles to be able to create new pages based on Contribute’s 
sample pages, select the Use Built-In Starter Pages check box. 


If you don’t want roles to be able to create a page from one of 
Contribute’s sample pages, deselect the check box. This check box is 
selected by default. 
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9. Decide which option you want: 


e If you want roles to be able to use any page on your Web site as a 
basis for a new page, select the Create a New Page by Copying Any 
Page on the Website check box, and skip to Step 11a. 


e If you want contributors to be able to use only specific existing pages 
on the site to create new ones, make sure the Create a New Page by 
Copying Any Page on the Website check box is deselected, and pro- 
ceed to Step 10a. 


e If you don’t want roles to be able to base a new page on any page on 
your site, deselect the Create a New Page by Copying Any Page on 
the Website check box. This check box is selected by default. 


10a. Decide which option you want: 


e If you want roles to be able to create a new page based on a specific 
page (or set of pages) on your site, select the Create a New Page by 
Copying a Page from This List check box. 


e If you do not want roles to be able to create a new page based ona 
specific page, skip to Step 11a. 


The Add and Remove buttons become active. 
10b. Click the Add button. 


The Choose File dialog box appears, with the directory structure of 
your site on the left. 


10c. Click the page on which you want contributors to be able to model a 
new page. 


If the page is in a folder, double-click the folder to open it in the dialog 
box, and then click the page. The preview section on the right displays 
the page you selected. 


10c. Click OK. 


The Choose File dialog box disappears, and the selected page appears 
in the list. Repeat Steps 10a through 10d if you want to add more pages. 
These pages appear as choices when the user in the role tries to create 
a new page. 


11a. If you want roles to work from a Dreamweaver template when creat- 
ing a new page, select the Use Dreamweaver Templates check box 
and continue with Step 11b. Otherwise, skip to Step 12. 


When the Use Dreamweaver Templates check box is selected, the Use 
Dreamweaver Templates section of the dialog box becomes active. 


11b. Decide which option you want: 


e If you want roles to be able to base a new page on any Dreamweaver 
template on your site, select the Show Users All Templates option 
and proceed to Step 12. 


lic. 


12. 
13. 
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e If you want roles to be able to base a new page only on a specific 
template (or set of templates), select the Only Show Users These 
Templates option and proceed to Step 11c. 


Double-click the template name (or names) in the Hidden Templates 
field, or click the template name and then click the Show button. 


The name of any template that roles see when they try to create a new 
page is listed in the Only Show Users These Templates field on the left. 
Figure 3-11 shows that we want the Communications Dept. role to be 
able to create new pages only from the News template. 


Make other changes to the role’s permissions as needed, then click OK. 


Click OK in the Administer Website dialog box to save the changes. 


Setting file placement rules 

Administrator lets you configure settings for placing various types of files 
when users upload them. Contribute offers default rules for style sheets, 
images, Microsoft Office files (like Word docs and Excel spreadsheets), PDFs, 
and any other file types that have no specific file placement rule. 


To add a file placement rule, follow these steps: 


1. 


vı 


a 


a] 


If you have the Edit Role Settings dialog box open already, skip to 
Step 5. Otherwise, continue with Step 2. 


. Choose Edit™Administer Websites> Name of Site where Name of Site 


is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 3. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 4. 


. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears, open conveniently to the 
Users and Roles screen. 


Click to select the role for which you want to edit settings. 


The role is highlighted. 


. Click the Edit Role Settings button. 


The Edit Role Settings dialog box appears, with the name of the role and 
Web site in the title bar. 


. Click File Placement in the list on the left. 


The File Placement options appear on the right. 


. Click the Add button. 


The File Placement Rule dialog box appears. 
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9a. 


9c. 


10. 


11. 


12. 


13. 


14. 


15. 
16. 


. Type or paste an extension (.mov or . swf, for example) in the File 


Type Extensions text field. 


If you want the uploaded file to reside in the same folder as the Web 
page that links to it, select the first Location option and go to Step 12. 


. If you want the file to be placed in a folder that resides at the same 


level as the Web page, select the second option and enter a folder 
name in the text field and go to Step 12. 


Contribute creates the folder. 


If you want the uploaded file to be put in an existing folder on your 
site, select the Specific Folder on Your Website option. 


Two further options become available. 


Click Choose and navigate to the folder where you want to put the 
uploaded file. 


If you want Contribute to write links to uploaded files relative to the 
root of the Web site, click the check box. 


If, on the other hand, you want Contribute to write links relative to the 
page, don’t mark the check box. 


Click OK. 


The File Placement Rule dialog box disappears, and the File Size section 
appears in the Edit Role Settings dialog box. 


If you want to specify a maximum size for uploaded files, select Reject 
Linked Files (Except Images) That Exceed Max File Size. Otherwise, 
skip to Step 15. 


The Max File Size text field becomes active. 


Double-click or click and drag to highlight the default value and enter 
a new number in the Max File Size text field, as shown in Figure 3-12, 
to set a maximum file size. 


If you don’t want users to be able to upload files, set Max File Size to 0. 


The field uses kilobytes as its unit of measurement. If your maximum file 
size is greater than 1 megabyte, calculate 1,024 kilobytes per megabyte. 

For example, a 5-megabyte file is 5,120 kilobytes. Note that the text field 

will not accept a value greater than 9,999 kilobytes. 


Make other changes to the role’s permissions as needed, then click OK. 


Click OK in the Administer Website dialog box to save the changes. 


To edit a File Placement rule, follow Steps 1 through 6, click a rule to select 
it, and click the Edit button. Change any rule options as outlined in Steps 8 
through 15. 





Figure 3-12: 
We have 
limited the 
size of an 
mp3 file a 
user may 
upload to 5 
megabytes. 
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To delete a rule, simply follow Steps 1 through 6, click a rule to select it, and 
click the Delete button. A warning may appear, asking if you really want to 
remove the rule. Click Yes to remove the rule and close the warning dialog 
box. Note that you may not delete any of Contribute’s default rules, though 
you can edit them. 


Working with shared assets 


Shared assets are things like Dreamweaver library items, Flash movies, and 
images that you want available for users to place easily in Web pages. 


Adding a shared asset 


To add a shared asset, follow these steps: 
1. If you have the Edit Role Settings dialog box open already, skip to 
Step 5. Otherwise, continue with Step 2. 


2. Choose Edit>Administer Websites> Name of Site where Name of Site 
is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 3. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 4. 


3. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears, open conveniently to the 
Users and Roles screen. 


4. Click the role for which you want to edit settings. 
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Figure 5-13: 

This site has 
a whopping 

four shared 

assets. 


5. Click the Edit Role Settings button. 


The Edit Role Settings dialog box appears, with the name of the role and 
Web site in the title bar. 


6. Select Shared Assets in the list on the left. 


The Shared Assets options appear on the right, as shown in Figure 5-13. 
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7. Click Add and select an asset type from the pop-up menu. 


The choices are Image, Library Item, and Flash. The Choose window 
appears. 


8. Navigate to the asset you want to share. 


Shift+click to select multiple contiguous items; Ctrl+Click to select multi- 
ple noncontiguous items. You can also click the Select All Files in Folder 
button if you want to share all the items. If the Shared Asset Properties 
dialog box appears, see the instructions on Editing Shared Assets for 
details on options. 


9. Click OK. 


The Choose window disappears, and a dialog box informs you that you 
have the option to prevent users from editing the asset. 


10. Click OK to close the dialog box. 
11. Make other changes to the role’s permissions as needed, then click OK. 
12. Click OK in the Administer Website dialog box to save the changes. 





Figure 3-14: 
The Shared 
Asset 
Properties 
dialog box 
offers 
different 
options 
depending 
on which 
type of 
asset you 
choose and 
how many 
assets you 
select. 
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Editing a shared asset 

You can edit the name of any shared asset, regardless of type. The asset 
name is what shows up for the user when he selects Insert™Shared Asset. 
By default, the asset name is the filename, minus the extension. For example, 
if the filename is di_113_smal1_2006.gif, it appears to the user as di_ 
113_smal11_2006. An asset name like that might not be helpful to the user, 
so Contribute gives you the power to name the asset something more user 
friendly, like Logo - Small. 


If the asset is an image, you can also input an ALT tag. 


If the asset is a Dreamweaver library item, you can change the asset name 
that appears to users and prevent users from editing the item. (By default, 
the Lock Item on Page check box is unselected, so users can edit the library 
item.) 


To edit a shared asset, follow Steps 1 through 6 in the “Adding a shared 
asset” section, earlier in this chapter, and then do the following: 


1. Click to select an asset and then click the Edit button. 


The Shared Asset Properties dialog box appears, as shown in Figure 
3-14. If you have selected multiple items, the dialog box will appear 
slightly different. The contents of the box will also be slightly different 
depending on which type of asset you have selected. 
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2a. If the asset is an image, change the asset name and ALT tag as needed. 


2b. If the asset is a Dreamweaver library item, change the asset name and 
select or deselect the Lock Item on Page check box as needed. 


2c. If the asset is a Flash SWF, change the asset name as needed. Click OK 
to close the dialog box. 


3. Make other changes to the role’s permissions as needed, then click OK. 


4. Click OK in the Administer Website dialog box to save the changes. 


Deleting a shared asset 

To delete a shared asset, follow instructions 1 through 6 in the “Adding a 
shared asset” section earlier, and then click an asset or assets and click the 
Remove button. A warning dialog box appears, asking if you’re sure you 
want to remove the asset. Click Yes. The dialog box closes. Then you can 
make other changes in the Administer Website dialog box, or click OK to 
save your changes and close the Administer Website dialog box. 


Customizing options for adding new images 

As an administrator, you can set a file size limit for images; Contribute won’t 
allow a role to add an image with a file size greater than the maximum you 
set. By default, there’s no limit. You can also set maximum image dimen- 
sions. Note that these settings apply only to new images, not to shared 
assets or images inserted from the Web site. 


If you want to allow users to edit new images using the built-in Contribute 3 
image-editing tools and to constrain the user’s image-editing options, just 
follow these steps: 


1. If you have the Edit Role Settings dialog box open already, skip to 
Step 5. Otherwise, continue with Step 2. 


2. Choose Edit>Administer Website> Name of Site where Name of Site 
is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 3. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 4. 


3. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears, open conveniently to the 
Users and Roles screen. 


4. Click to select the role for which you want to edit settings. 
The role is highlighted. 
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5. Click the Edit Role Settings button. Book V 


The Edit Role Settings dialog box appears, with the name of the role and rapsi 


Web site in the title bar. 
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7. Select the Enable Contribute Image Processing When Inserting Images 
check box if you want users to be able to use Contribute’s built-in 
image-editing capabilities. 

This option is selected by default. If you deselect this option, all the 
other options on the page lose their editability. 


8. Choose either the Automatically Reduce Image Dimensions if They 
Exceed These Limits option or the Reject Images That Exceed Max File 
Size option. 


If you choose the former, go to Step 9. If you choose the latter, skip to 
Step 10. 


9. Double-click or click and drag to highlight the default Max Width 
value and enter a new number in pixels. 


10. Double-click or click and drag to highlight the default Max Height, 
and set it in pixels. 


558 Creating Connection Keys to Provide Access to Contributors 


11. Select a JPEG quality from the drop-down menu. 
After making your selections, skip to Step 13. 


12. Double-click or click and drag to highlight the default value, and enter 
a new number in the Max File Size field. 


If you want the maximum file size to be 64 kilobytes, you can skip this 
step, of course. 


13. Make other changes to the role’s settings as needed, then click OK. 


Creating Connection Keys to Provide 
Access to Contributors 


gomiBEn Connection keys are password-protected, encrypted text files that contain 
& the data Contribute needs to establish a connection with a Web site. When 
you send a connection key to a user in a role, all the user must do to estab- 
lish a connection is double-click the key and enter a password. That can be 
pretty handy if you have several people in a group, since you can e-mail the 
same key to all of them, or post the key on your internal network. 


You don’t have to go to each member’s machine to set up the connection, 
nor do you have to worry about providing tech support if you’ve decided to 
let people establish their own connections. Best of all, connection keys are 
specific to roles, so you don’t have to worry that a contributor will choose 
to be in the wrong role. 


To create a connection key, follow these steps: 
1. Choose Edit>Administer Websites®Name of Site where Name of Site 


is the site you want to administer. 


If the Administrator Password dialog box appears, go to Step 2. 
Otherwise, when the Administer Website dialog box appears, open to 
the Users and Roles screen, skip to Step 3. 


2. Enter your password and click OK or press Enter. 


The Administer Website dialog box appears, open conveniently to the 
Users and Roles screen. 


3. Click the Send Connection Key button. 


The Export Wizard’s Welcome screen appears, as shown in Figure 3-16. 





Figure 3-16: 
The Export 
Wizard's 
Welcome 
screen 
starts you 
off with a 
basic Yes or 
No question. 
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4a. If the role will connect to your Web server in the same way as you do, 
leave the Yes option selected under the question, Would You Like to 
Send Your Current Connection Settings? If not, skip to Step 4c. 


Proceed to Step 4b. 


4b. If you want to include FTP or SFTP login information in the connec- 
tion key, select the Include My FTP Login and Password check box. 
Click Next and skip to Step 6. 





Export Wizard 


Export Wizard ] PS) 
Welcome Po | 


This wizard creates a secure connection key that you can send to your users, 


Would you ike to send your current connection settings? 
®© Yes 
[V] Include my FTP logn and passwoed. 
O No, | would Ike to customize the connection settings for other users, 








[ Help i — Net | Cancel . | 








If your connection to the site is Local/Network, the box will be grayed 
out. When you click Next, the Role Information screen appears. 


Ac. If users in the role will be connecting to the site in a different way 
than you do, select the No, I Would Like to Customize the Connection 
Settings for Other Users option. Then click Next and go to Step 5. 


If users in the role will be connecting via the Web while you connect via 
your network, customize the connection settings for the role. When you 
click Next, the Connection Information screen appears. 


5. Enter the information and click Next. 


For information about the Connection Information screen, see the sec- 
tion on connecting to a site with the Connection Wizard in Book V, 
Chapter 2. When you click Next, the Role Information screen appears. 


6. In the Select a Role area, click the name of the role that will use the 
connection key you’re creating. Click Next. 


When you click the role, its description appears at the right, as shown in 
Figure 3-17. When you click Next, the Connection Key Role Information 
screen appears. 
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WING) 
RY 





Figure 3-17: 
When you 
select a 
role, its 
description 
appears at 
the right. 


7. To answer the question, How Would You Like to Export the 
Connection Key File? select either the Send in E-mail or the Save to 
Local Machine option. 


Macromedia recommends you not send the key via Web-based e-mail 
(like Hotmail or Yahoo!) because, even though the key is encrypted, it 
contains sensitive information that should never be sent via inherently 
less-secure, Web-based e-mail. 











Send Connection Key 


Connection Key Wizard 7 E ’ 
Role Information , z y | 


Specify the role for users of this connection key, 


Select a role: Role description: 

Administrator This group has access to the News 
Wrker directory only, and may create new 
Publisher pages only from the News template. 
Communications Dept. 

[ Heip [ <Back lL ~ Newt > | [ Cancel 














8. In the top text field, enter a password that enables users in the role to 
use the key. Press the Tab key or click in the bottom text field. 


A contributor must have the password to use the key. The password 
may contain spaces, numbers, and letters and be up to 30 characters 
long; the password is case sensitive. If you send the key in an e-mail, it’s 
safest not to include the password in the same e-mail. Instead, send the 
password in a separate e-mail or, better yet, reveal the password ver- 
bally to users in the role. 


9. Re-enter the password exactly as you entered it in the above text field 
and click Next. 


The Summary screen appears, as shown in Figure 3-18. 


10. Carefully check the information on the Summary screen to make sure 


it is correct. 


e If it isn’t, use the Back button to go back and correct any informa- 
tion on previous screens and click Next to return to the Summary 
screen. 


e If the information is correct, click Done. 





Figure 3-18: 
The 
Connection 
Key 
Wizard's 
Summary 
screen 
shows the 
connection 
key settings 
at a glance. 
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Connection Information Xi 
Type: FTP 
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FTP username: (not i 
FTP password: (not included) 
Connection Key Information 
Method: Send in e-mail 
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If you selected the Send in E-mail option, a new e-mail with the connec- 


tion key attached opens automatically in your e-mail program. 


Customize the e-mail as necessary, add a recipient or recipients, and 
send the message. If you selected the Save to Local Machine option, the 
Export Connection Key dialog box opens. Navigate to the folder on the 
local machine or on your network where you want to place the key and 


click Save. 
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Chapter 4: Integrating Contribute 3 
with Other Macromedia Products 


In This Chapter 
1” Making FlashPaper 2 work 


Pairing Contribute 3 and Dreamweaver 


Using the PayPal and Google extensions 


C. ontribute 3 isn’t really integrated into the Macromedia Studio 8 suite to 
the extent that Dreamweaver, Fireworks, and Flash are. It’s more a 
stand-alone product created for people who need to maintain Web sites but 
not build them. 


Contribute 3 does add the capability for users who have been given permis- 
sion by an administrator to open a draft in Dreamweaver using the File 
Actions™Edit Page Source in External Application command. (See Book V, 
Chapter 1 for more information.) Additionally, Contribute 3 includes some 
basic image-editing tools based on the Fireworks graphics engine (the same 
tools you can find in Dreamweaver), but Contribute cannot launch Fireworks. 


Contribute 2 for Windows introduced FlashPaper to the world. Contribute 3 
ships with FlashPaper 2, an upgraded version that not only adds new capa- 
bilities on the Windows side but also works with Mac OS X. 


Using FlashPaper 2 


sy TO 


FlashPaper converts any printable file (word processing document, spread- 
sheet, slide show) into an SWF file that can be viewed by anyone with the 
latest version of the stand-alone Macromedia Flash Player or a browser with 
the latest version of the Flash plug-in. 


FlashPaper 2 adds the capability to convert any printable file into a PDF, 
which can be viewed by anyone with the widely installed Adobe Acrobat 
Reader browser plug-in or stand-alone product. 
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Figure 4-1: 
The 
FlashPaper 
icon. 


WING) 
RY 


Unless you specified otherwise when you installed Contribute, you installed 
FlashPaper also, and the FlashPaper icon was placed automatically on your 
desktop, as shown in Figure 4-1. 





2] 


FlashPrinter exe| 











In Windows, FlashPaper can be accessed from within Contribute. (See the 
section on adding images, links, and more in Book V, Chapter 2 for details.) 
That means when you insert a document as FlashPaper into a draft, you 
might not even realize you’re using another application. But FlashPaper can 
run quite independently of Contribute — in fact, on the Macintosh, it only 
runs independently of Contribute. 


You can use FlashPaper as a stand-alone application in two ways: 


+ By dragging a printable document onto the FlashPaper desktop icon. 


+ By selecting the FlashPaper printer when you print from within an appli- 
cation like Word or Excel. Simply choose FlashPaper from the main 
menu. Figure 4-2 shows the Convert to Macromedia Flash (.swf) option 
selected in Word. In some applications, you launch FlashPaper by choos- 
ing Print and clicking the FlashPaper option, as shown in Figure 4-3. 


Whichever method you choose, your printable document is cloned as an 
SWF or PDF file that can then be inserted into your draft with Contribute on 
both Windows and Mac computers. You can also select the Email PDF 
option, which converts the document to a PDF and creates an e-mail with the 
PDF attached. 


While you could theoretically “print” an image as an SWF file, there’s no com- 
pelling reason to do so, because image formats like GIF and JPEG are nearly 
universally compatible with image-display and -editing programs as well as 
browsers. 


There is one catch: SWF files generated by FlashPaper cannot be edited 
with Macromedia Flash 8. If you need to change a file you’ve converted 
with FlashPaper, you have to change the original file, and then make a new 
FlashPaper document from it. 





Figure 4-2: 
To “print” 

to an SWF, 
you can 
select the 
FlashPaper 
printer when 
you print 
from many 
applications, 
including 
Word. 








Figure 4-3: 
We've 
selected the 
FlashPaper 
option while 
printing 
from 
Internet 
Explorer. 
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Flash Professional 3 


The industry's most advanced authoring environment for creating interactive websites, 
digital experiences and mobile content. 


Fireworks 8 


Balance maximum image quality with minimum compression size as you create, edit and 
optimize images for the web with precise control 
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Teaming Contribute with Dreamweaver 


For Web developers who plan to hand off the maintenance of the sites 
they’ve built to people who don’t know anything about HTML, FTP, or CSS, 
Contribute represents a certain amount of peace of mind. Especially when 
combined with Dreamweaver templates, Contribute can make creating new 
pages with a consistent design faster and simpler for nontechnical people 
doing site maintenance. 


Understanding Dreamweaver Templates 


A Dreamweaver template is a special type of file (it uses the extension . dwt) 
that may contain HTML, CFML, and other typical Web page code, and that 
also contains hidden instructions that tell Dreamweaver and Contribute to 
“lock” certain portions of the code — basically making those chunks of code 
unavailable for editing. 


Figure 4-4 shows a new page based on a simple Dreamweaver template. The 
template has three editable areas: the top navigation area, the page header, 
and the main text area. When the cursor is over any other area on the draft, 
it becomes a circle-slash, signifying that edits to the area are not permitted. 


The page title, which you can see highlighted in the Pages panel as well as 
prominently displayed in the Contribute title bar in Figure 4-4, has been 
entered in the New Page dialog box that appears when a contributor creates 
a new page. (See Book V, Chapter 2 for details on creating a new page based 
on a Dreamweaver template.) 


For details about creating Dreamweaver templates, see Book II, Chapter 7. For 
details about how to ensure that contributors use particular templates to 
create new pages on your site, see the section on granting role permissions in 
Book V, Chapter 3. 


Working with PayPal and Google 567 











(Q Macromedia Contribute - (AAT Records Announces New Svelte CD (AATRecordsAnnouncestlewSvelteCD (New) .him)] ag) 
File Edit View Bookmarks Insert Format Table Help 
(zs 2D Publish | 5% Send for Review | $H] Save Fer Later | HM Cancel] tink [E]. m E a) 
@ Bowser: Argyl Adverturs Tres Recors 
OF AAT Ratords Announces Mew Svsite CD Y)|OefastFon |p) 12 
O Tee Fun 


[O Argyl Adventure Tree Records 
[O Argui Adverkure Tree Records 


É) Treets- Adventure Tree Records 





at a ridiculously high profit 
i y tice for all. 





Figure 4-4: 
Creating a 
new page 
from a 
Dream- 
weaver 
template. 


Draft Console 




















Working with PayPal and Google 


PayPal is a service that allows users to conduct secure credit card transac- 
tions over the internet and transfer customer payments to vendor bank 
accounts. Contribute 3 includes an extension similar to the one available for 
Dreamweaver that makes adding PayPal buttons to your page a snap. (Note: 
You must have a PayPal Business or Premier account to insert the PayPal 
buttons into your page, and your site must already have the code for the 
shopping cart.) 
N TO 
` Contribute 3 also offers users the ability to add a Google search box with the 


Se) 
sir) aid of a simple wizard. 


Inserting PayPal buttons 


An administrator must enable a user to insert PayPal buttons. (See Book V, 
Chapter 3 for information.) When you choose Insert™PayPal, you can select 
the following options from the pop-up menu: 

+ Buy Now Button 

+ Add to Cart Button 

+ View Cart Button 
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Figure 4-5: 
The first 
screen of 
the Insert 
Google 
Search Field 
Wizard 
shows a 
preview of 
the search 
box. 


+ Subscription Button 


+ Donation Button 


A wizard guides you through the steps necessary to insert the buttons on 
your page — be sure to have your PayPal account information at hand. 


Do not insert more than one PayPal button per paragraph or table cell, and 
do not insert a button in an existing HTML form. Also, if you have existing 
JavaScript on the page, make sure to test your page after adding the button(s). 


To edit a PayPal button, simply click to select it in the draft and choose 
Format™PayPal Properties to open a dialog box in which you can change 
various settings. 


Inserting a Google search field 


To insert a Google search field into a draft, click the page where you want 
the search box to go and choose Insert®Google Search Field. A simple three- 
page wizard (shown in Figure 4-5) guides you through the setup process. 


You can set up a search of the entire Web, or give people who visit your site 
the choice to search the entire Web or your site specifically. You can also set 
the results page background color, as well as text and link colors. The 
Google logo must appear on the results page, as it must on the page with the 
search box itself, but you can add your own logo to the results page. 


To edit a Google search field in a draft, click to select it on the page and 
choose Format™Google Search Field Properties. To delete a Google search 
field, simply click to select it in your draft and press the Delete key. 





Insert Google Search Field >) 


Step 1 of 3: Search options 


This wizard wil add a search field to your web page, enabling vistors to seach your website 
of the ertiie web. This is a free service from Google. 


Search type: 


> WebSearch 
© WebSearch with SiteSearch 
Domains: 


[C Enable SaleSearch to exclude adukthemed content from results 


Previews 


Go. gle [Google Search | 





Google webassist (A) | Help f Next > l Cancel | 
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Chapter 1: Introduction to 
FreeHand MX 


In This Chapter 


Introducing FreeHand 
Introducing the drawing tools 
Appreciating vector graphics 


Navigating the interface 


Í: this chapter, you get to know FreeHand MX up close and personal. We 
show you what you can do with FreeHand and give you a tour of the 
interface. We also introduce you to the drawing tools that you use to create 
vector objects. Finally, we show you how to make the most of those handy 
inspectors and panels that are lurking about the interface. 


FreeHand has been dropped from the latest, leanest version of Studio. 
Those of you who, like us, have upgraded from previous versions of the 
suite are likely to keep FreeHand on your hard drive for those occasions 
when you want to create complex vector graphics that need to be used both 
in print and in Web pages or Flash movies. And you'll want to keep this book 
on hand for those occasions! 


Introducing FreeHand MX 


First and foremost, FreeHand is an illustration program. You use it to create 
illustrations for use in print or Web applications. FreeHand has sophisti- 
cated drawing tools that you use to create shapes for your illustrations. The 
shapes range from ho-hum circles and rectangles to free-form shapes limited 
only by your imagination. You can specify the color of the shape (known as 
a fill) and whether the shape has an outline (known in FreeHand-speak as a 
stroke). 


The shapes you create with the drawing tools are vector-based. What? You 
say you don’t know what a vector is, Victor? Well, if you have to know right 
now, you can fast-forward to the section, “Understanding the Role of Vector 
Graphics.” 
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You combine the shapes you create with text objects, and if your design 
requires, you can add a photograph to the illustration. Photo-realistic images 
are also known as bitmaps, which you should not confuse with the Windows- 
only BMP image format, which also goes by the name of bitmap. 


When you have many objects in a document, selecting individual shapes can 
be difficult. And sometimes you’ve got so many objects, it’s hard to see the 
vectors for the bitmaps or text objects. The designers of FreeHand give you 
an easy way to organize a busy document: layers. When you select a layer, 
you can add objects to the layer and then arrange them just the way you 
want. When you’ve got it just right, you can lock the layer and begin working 
on another layer. No matter what you do on the new layer, you can’t inadver- 
tently mess up your locked layer — until you unlock it, that is. 


Prior versions of FreeHand allowed you to create documents with vector 
objects and bitmaps for print purposes. The current version of FreeHand gives 
you increased support for creating objects for the Web. You can export your 
whole document or just selected objects from your document in a wide vari- 
ety of formats. And if it has been a long day, and you’ve had all the FreeHand 
you can handle, you can save the document in FreeHand’s native FH11 format 
for another day’s work. When you save a document in FreeHand’s native 
format, you can edit all objects in the document and, if needed, add more or 
delete existing objects. 


Using Illustration Tools for the Web 


When you have a program with as much power as FreeHand, you can easily 
create documents for Web pages. The sophisticated drawing tools in 
FreeHand make it possible for you to create the basis for Web page buttons 
that you can add to a document you’re creating in Dreamweaver, or for that 
matter, buttons for a Flash movie. You can assign links to the buttons. When 
youre finished with the document, you can export selected objects, or an 
entire document, in Web-friendly image formats. 


The illustration tools in FreeHand also make it possible for you to create 
artsy-fartsy interfaces for your Flash movies and banners for your Web 
pages. If you create a FreeHand document with multiple pages, you can also 
export the whole thing as a Macromedia Flash SWF movie. 


Understanding the Role of Vector Graphics 


Vector objects are composed of lines and curves that are described mathe- 
matically, which results in a small file size. Vector-based graphics are 
resolution-independent, which means that you can increase their size with- 
out losing image fidelity. By contrast, bitmaps cannot be enlarged without 





Figure 1-1: 
Bitmaps 
become 
grainy when 
enlarged 
(right), but 
vector 
objects 
remain razor 
sharp when 
enlarged 
(left). 








Figure 1-2: 
You define 
the shape of 
a vector 
object by 
modifying 
the points. 





573 


Understanding the Role of Vector Graphics 


losing fidelity. Figure 1-1 shows an enlarged vector object alongside an 
enlarged bitmap. (Which one would you rather use in that snazzy Web site 
yov’re planning?) 


When you create a vector object, you have point-by-point control over the 
shape of the object. Vector objects have straight points and curve points. 
You can specify which type of point is created when you create free-form 
shapes with the Pencil tool. When you use the shape tools, the point type is 
predetermined, but you can change it in a heartbeat. A curve point has han- 
dles that you can click and drag to modify the shape. Figure 1-2 shows a 
vector object with both straight and curve points. 


Vector object Bitmap 











Curve points 

















Straight point 
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The FreeHand interface has many components. When you launch FreeHand 
and create a new document, you get an interface with a document window, a 
toolbar docked on the side of the interface, a status bar (Windows only) at 
the bottom of the interface, and some panels and inspectors aligned along 
the right side of the interface, as in other Macromedia Studio products like 
Fireworks and Flash. The FreeHand workspace is shown in Figure 1-3. 


When you launch the Windows version of FreeHand, you see a blank gray 
screen, and the interface is lightly shaded and inactive. To create a new doc- 
ument and start working, just press Ctrl+N or choose FileNew from the 
main menu. 


Exploring the document window 


In the center of the interface, you find what looks like a blank piece of paper. 
(The Macromedia designers put a border and a drop-shadow around it so 
you can find it.) This is the document you are creating. 


The area outside of the document is known as the pasteboard. No, you can’t 
paste sticky notes on it to remind yourself to pick up milk on your way 
home, but you can use it as a staging area for items you intend to use in the 
document but don’t quite know where yet. Objects outside of the document 
area will not normally be printed or exported, but they are saved with the 
FreeHand document. 


Around the border of the document, you find vertical and horizontal scroll 
bars that you can use to pan to different parts of the document. Scroll bars 
come in handy when you magnify the document or if the document has 
multiple pages. 


FreeHand has lots of contextual menus. Contextual menus contain com- 
mands and options relevant to a selected item or workspace. You access the 
commands in a contextual menu by right-clicking the specific item or work- 
space. 


Using the drawing tools 


On the left side of the interface, you find the toolbar, which shows various 
tools neatly grouped and stacked. On the toolbar, you find your drawing 
tools and other tools that you use to modify vector objects, move them, 
reshape them, and more. We show you how to use most of the drawing tools 
in Book VI, Chapter 2. The other tools are discussed in detail throughout 
Book VI as they pertain to different tasks you perform with FreeHand. 





Figure 1-3: 
The 
FreeHand 
workspace 
is your key 
to creating 
vector 
objects. 
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In FreeHand, your tools are displayed on a floating toolbar by default. The 
toolbar itself is neatly labeled Tools, and your tools are divided into two 
columns. Because it is a floating toolbar, you can click and drag it anywhere 
in your workspace, dropping your tools at any convenient location. If you 
don’t like the spot you’ve dropped the tools, you can click the title bar and 
then drag and drop to reposition the toolbar. Figure 1-3 shows how the tools 
look as a floating toolbar. 


You can, however, dock the Tools toolbar to the top or bottom of the screen 
if you’re more comfortable having the tools stay in the same location at all 
times. Just click the toolbar’s title bar and drag the toolbar to the top or 
bottom of the application window. A thick black outline previews where the 
toolbar will go; release the mouse button when the outline sits where you 
want the toolbar. 


To select a tool, just click its icon. If you’re not sure what a particular tool 
does, hold your cursor over the tool for a second or two, and a ToolTip will 
appear. 


ToolTips are enabled by default. If you prefer to work without ToolTips, you 
can turn them off by choosing Edit™Preferences. In the Preferences dialog 
box, click the Panels tab and then deselect the Show ToolTips option. 
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Many of the tools have keyboard shortcuts, which is a convenient way to 
change quickly from one tool to another. Some of the tools have two key- 
board shortcuts, a letter and a number. Table 1-1 shows the keyboard short- 
cuts for frequently used tools, listed in the order in which they appear on 


























the toolbar. 

Table 1-1 Keyboard Shortcuts for Tools 

Tool Shortcut Tool Shorteut 
Pointer V or 0 (zero) Subselect Aor 
Page D Lasso L 
Text T Pen Por6 
Bezigon Bor8 Pencil Yor5 
Line Nor4 Rectangle R 
Polygon Gor2 Ellipse Oor3 
Free-form For9 Knife Kor7 
Hand H Zoom Z 


Working with toolbars 


In addition to the drawing tools, you have other tools to simplify your life as 
a FreeHand illustrator. They’re tucked away as menu commands, but you can 
get them anytime you need them by choosing WindowToolbars and then 
selecting one of the following: 


+ Main: Use this toolbar, which is open by default, to duplicate many 
menu commands. On this toolbar, you find icons to open a document, 
save a document, print a document, import graphics, open frequently 
used panels, and more. 


+ Text: Use this toolbar to format text objects in your documents. You can 
choose font style, font size, and font color, and specify paragraph align- 
ment, along with other options that are discussed in Book VI, Chapter 3. 


+ Controller: Use the Controller toolbar to test a document you plan to 
export as a Flash movie. You use the VCR-like controls to play the movie 
and use the other icons to export the movie. 


+ Info: Choose this toolbar to see information about objects you select. 
The Info toolbar displays the type of object selected, the current posi- 
tion of the cursor, and the object’s coordinates when you drag it to a dif- 
ferent position in the document. 


+ Xtra Operations: Use this toolbar to transform and distort the path of 
one or more selected objects in your document. We show you how to 
use the available options from this toolbar in Book VI, Chapter 5. 


Investigating the FreeHand MX Interface 577 


+ Xtras: Use this toolbar to access FreeHand plug-in tools, such as the Arc 
tool and Fisheye Lens tool. We show you how to use these tools in Book 
VI, Chapter 5. 


+ Envelope: Use this toolbar to transform shapes or object groups by 
applying an envelope to them. When you distort or warp the envelope, 
every shape or object within it is distorted or warped in the same way. 


When you choose one of these toolbars, it appears as part of the main tool- 
bar at the top of the interface. However, you can drag the toolbar into the 
workspace if this suits your working preference. Better yet, every time you 
launch FreeHand, the workspace is laid out as you last left it. 


Perusing the panels 

When you launch FreeHand, you find several panel groups aligned along the 
right-hand side of the screen. Panel groups are combinations of panels that 
you use to create or modify items for your FreeHand document. For exam- 
ple, the Color Mixer tab of the Mixer and Tints panel gives you all the tools 
you need to mix up a sky-blue-pink, or any other color your artistic muse or 
client requires. 


Each panel within a group has its own tab. If you don’t like a panel group’s 
position, you can click the bulleted list in the top right of the panel, select 
Group Mixer With from the menu that appears, and then select the panel you 
want to add the tab to. You can collapse panel groups when you're finished 
with them or close them entirely to clear the workspace. You can also create 
custom panel groups to suit your working preferences. By default, the follow- 
ing panels are shown when you launch FreeHand: 


+ Properties: The Properties panel includes two tabs: Object and 
Document. The Object tab enables you to modify properties of the cur- 
rently selected object on the screen, while the Document tab enables 
you to modify the default properties of the entire document. When you 
select an object, at the top of the Object tab, you find a list of properties 
of the object. The list may contain branches, that is, sets of properties 
that are dependent on a property (branches are indented under the 
property on which they’re dependent). When you select a property from 
the list (simply click to select), editable options for the property appear 
at the bottom of the panel. The properties that may appear, depending 
on the type of object, are 


e Object: If you click the name of a vector object, the bottom of the 
panel displays the height, width, and position on the page of the 
object. For text objects, the basic text parameters — font, size, and 
styling — are shown. You can change any of these parameters by 
entering new values, a task we show you in Book VI, Chapter 4. If you 
click the name of a bitmap, the position, dimensions, scale, and other 
parameters appear at the bottom of the panel. 
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Stroke: A stroke is a theoretical line that defines the perimeter of an 
object; to make the stroke “real,” you give it attributes like width, 
color, and texture. If you select a stroke in the list, the bottom of the 
panel updates to show you the editable attributes of the stroke. If 
you don’t like what you see, you can change the stroke by choosing 
different options. We show you how to modify strokes in Book VI, 
Chapter 6. 


Fill: If you select the fill of a text or vector object, the bottom of the 
panel displays editable properties of the current fill (color, as well as 
pattern, gradient, or the like, as applicable). We show you how to 
define an object’s fill in Book VI, Chapter 2. 


Effects: If you have an effect on the object (bevel, drop-shadow, and 
so on), you can click it in the list to display various editable proper- 
ties of the effect at the bottom of the panel. 


+ Depending on the object or property selected in the list, the following 
buttons may be active: 


Add Stroke: Click the Add Stroke button (the one with the pencil on 
it) to add a stroke to the selected object. 


Add Fill: Click the Add Fill button (the one with the paint can on it) 
to add a fill to the selected object. 


Add Effects: New to FreeHand MX, you can also add effects through 
the Object tab. Select your object and then click the Add Effects 
button to add many cool effects, including blends, sketches, and 
transformation effects. 


Remove Branch: Click the Remove Branch button (the one with the 
trash can and three parallel lines) to remove a selected property and 
any properties dependent on it. 


Remove Item: Click the Remove Item button to delete the selected 
property or object from the list. 


+ Mixer and Tints: The Mixer and Tints panel contains two tabs: the Color 
Mixer tab and the Tints tab. You use the Color Mixer to mix a color. You 
can mix the color using the CMYK (Cyan, Magenta, Yellow, Black) color 
model, the RGB (Red, Green, Blue) color model, the HLS (Hue, Lightness, 
Saturation) color model, or the System Color Picker. After you mix a 
color, you can add it to the Swatches panel, a task we show you how to 
perform in Book VI, Chapter 6. You use the Tints tab to specify the per- 
centage or hue of the original color. We show you how to tint reds, 
greens, blues, and other popular rainbow colors in Book VI, Chapter 6. 


+ Layers: You use the Layers panel to add layers to a document and 
manage layers within a document. We show you how to work with layers 
in Book VI, Chapter 2. 


Figure 1-4: 

A tale of two 
panel 
groups. 


Investigating the FreeHand MX Interface 579 


+ Assets: The Assets panel includes three different tabs: Styles, Swatches, 


and Library. You use the Styles tab to duplicate, edit, or delete styles 
being used in your document. The Swatches tab is for creating a color 
palette for objects in your document. The Library tab, as you might 
expect, includes a set of ready-made objects that you can use in your 
document. 


Answers: The Answers panel gives you quick access to all the help fea- 
tures in FreeHand, including tutorials. 


In addition to the default panels that are active when you launch FreeHand, 
you can access several others by choosing Window™Panel Name (substitute 
Panel Name for the name of the appropriate panel). These panels include 


+ 


+ 


Navigation: Use the Navigation panel to assign URL links to objects and 
text in your FreeHand documents. 


Halftones: Use the Halftones panel when you add screened objects to a 
document. The only time you’d need to use halftones is when you’re 
preparing a document for a postscript-printing device at a service 
center. Halftones are beyond the scope of this book. 


Align: Use the Align panel to align objects in your document. We show 
you how to get your objects in alignment (without visiting a chiroprac- 
tor) in Book VI, Chapter 4. 


Transform: Use the Transform panel to move, rotate, scale, skew, or 
reflect a selected object. We show you how to fold, spindle, and other- 
wise mutilate objects with the Transform panel in Book VI, Chapter 5. 


You can move a panel group to any desired position in the workspace by 
clicking the panel title bar and then dragging and dropping it to the desired 
position. Figure 1-4 shows two panels side by side. The panel on the left is 
currently collapsed, while the panel on the right is strutting its stuff in the 
expanded position. 
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Here are a few final tips on how to navigate and manage panels: 


+ 


+ 


+ 


+ 


If you use a panel group frequently, collapse the panel group and move it 
to a convenient position in the workspace. 


When you have a panel group open with the Windows version of 
FreeHand, you can switch between panels by pressing Ctrl+Tab. 


To clear the workspace of all panel groups, choose View®Panels (or 
press F4). 


To display hidden panels, choose View™Panels (or press F4). 


Modifying groups 

Macromedia’s FreeHand design team worked long and hard to come up with 
an optimum, logical layout for panels and inspectors. However, like every- 
thing else, the way panels are grouped is not cast in stone, and if you’re one 
of those folks who likes different strokes, you can change the way panels and 
inspectors are grouped as follows: 


— 


. Choose View™Panels to bring up the default FreeHand panel grouping. 


. Select the name of the panel or inspector you want to group differently. 


The panel or inspector appears. Alternatively, you can click the panel’s 
or inspector’s tab to select it. 


. Make sure the tab you want to move is the active tab. 


To make a tab active, simply click it. If the panel doesn’t have tabs, you 
can skip this step. 


4. Click the bulleted list near the upper-right corner of the panel. 


5. Choose Group Name With, where Name is the name of the panel or 


inspector. 


. Choose the name of the panel group you want to group the panel or 


inspector with, as shown in Figure 1-5. 


The panel or inspector is added to the group you specified and is ban- 
ished from its former home. 





Figure 1-5: 
You can 
group a 
panel or 
inspector in 
a different 
group. 




















Stroke: Basic, tpt 








Investigating the FreeHand MX Interface 


Add Stroke 
Add Fill 
Add Effect 
Duplicate 
Remove Item 


Remove Branch 


Raster Effects Settings... 



































Group Object with > Mixer and Tints 

Help pints: Styles and Library 
Rename Panor Group Object and Document 
Maximize Panel Group 


Close Panel Group 




















New Panel Group 


581 


Book VI 


[r] 
= 
XIN puepaauy $ 
0} uonanponu] at 


582 Book VI: FreeHand MX 


Chapter 2: Understanding 
FreeHand MX Basics 


In This Chapter 


Creating a new document 
Working with text 

Adding shapes to the document 
Using the Pen tool 

Adding color to a shape 
Introducing layers 


Saving documents 


WU you create an illustration with FreeHand MX, you start by 
launching the program and creating a new document. After that, you 
can begin creating your masterpiece. This process can involve getting the 
word out by adding text, creating artwork by making standard shapes with 
the shape tools or free-form shapes with the Pen tool, and setting a dividing 
line between elements in your illustration with the Line tool. When you 
create objects for your illustrations, you can outline the object by defining a 
stroke, and add color to the object by defining the object’s fill. After you’ve 
created the document, you can save it for future editing and refinement. 
When your document is complete, you export the document to its intended 
destination. 


In this chapter, you get an overview of the typical FreeHand workflow. We 
also show you which tools you can use to create objects for your illustra- 
tions and point you in the right direction for additional information and tips. 


Creating FreeHand Documents 


The default size for a FreeHand document is 612 x 792 points (8 “x 11 
inches), which is letter size. You can modify the document size and add 
pages to the document by using the Document tab of the Properties panel. 
You also use the Document tab to set the bleed value — the amount of 
“spillover” of content that will be physically trimmed from the printed 
document — and final output resolution of the document. You can also 
modify parameters, such as the page orientation and the way thumbnails 
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are displayed in the Document tab. If you want, you can also create a Master 
Page to maintain the continuity of all pages in the document. A Master Page 
has elements that will be used on every page of the document, such as a text 
header with the client’s logo. We show you how to create Master Pages in 
the “Creating a Master Page” section, later in this chapter. 


Creating a new document 

You begin a FreeHand project by creating a new document. Creating a new 
document gives you a blank page that you use to assemble the artwork for 
your illustration. You can create a new document in one of two ways: 


+ Choose File®New Document. 


+ Click the New Document icon that looks like a blank piece of paper in 
the Main toolbar. To open the Main toolbar, choose 
WindowToolbars™Main. 


After you create a new document, it appears in the center of the Document 
window, as shown in Figure 2-1. 
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Figure 2-1: 
Every 
FreeHand 
project 
begins with 
a blank 
document. 
It's a 
FreeHand 
law. 
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Figure 2-2: 


Use the 
Document 
panel to 
change the 
size of the 
document. 
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Modifying documents with the Properties panel 

You use the Document tab within the Properties panel to change the orienta- 
tion of the document, change the size of the document, and so on. If the 
Properties panel is open but the Object tab is active, you can click the 
Document tab, shown in Figure 2-2, to make it active. If the Properties panel 
is not open, choose Window™Document. 
































Changing the document size and orientation 


If you need to change the size of a document, you use the Document tab of 
the Properties panel. You can choose from a standard document size or 
create a custom size. You also use the Document tab to change the document 
orientation from portrait (vertical) to landscape (horizontal). To modify the 
document size and orientation, follow these steps: 


1. If necessary, click the Document tab in the Properties panel to make it 
active. 


If the Properties panel is not open, choose Window™Document. The 
Document tab of the Properties panel opens (refer to Figure 2-2). 


2. Select the Page Size drop-down list. 


The Page Size drop-down list appears and provides you with a series of 
page size options. 


3. Choose one of the preset options. 


The first five presets are European sizes. The available presets are as 
follows: 


e A3: Creates a document sized 841.89 x 1190.55 points. 
e A4: Creates a document sized 595.27 x 841.29 points. 
e A5: Creates a document sized 419.52 x 595.27 points. 
e B4: Creates a document sized 708.66 x 1000.60 points. 
e B5: Creates a document sized 498.89 x 708.66 points. 


e Legal: Creates a document sized 612 x 1008 points. 
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e Letter: Creates a document sized 612 x 792 points. 
e Tabloid: Creates a document sized 792 x 1224 points. 


e Web: Creates a document sized 550 x 400 points, which is the default 
size for a Flash movie. The default orientation for this preset is 
Landscape. 


e Custom: Choose this preset, and the x and y fields become available. 
You can then enter values in these fields to create a document of the 
desired size. 


The measurements in the preceding list are shown in points, the 
default FreeHand unit of measurement. You will see different values if 
you change to a different unit of measurement. (To change to a differ- 
ent unit of measurement, choose one from the Units drop-down list at 
the bottom of the Document window.) For example, if you change the 
unit of measurement to inches, Letter size is 8.5 x 11 inches. 


4. Click the desired orientation button. 


Choose Portrait to create a document that is taller than it is wide or 
choose Landscape to create a document that is wider than it is tall. 


Adding pages to a document 


If you use FreeHand to create storyboards or Flash movies, you can add as 
many pages as you need to get the job done. When you add pages, you can 
format them by using a previously created Master Page. To add one or more 
pages to your document, follow these steps: 


1. If necessary, click the Document tab in the Properties panel to make it 
active. 


If the Properties panel is not open, choose Window™Document. The 
Properties panel appears with the Document tab selected. 


2. Click the arrow near the upper-right corner of the panel. 
The Options menu appears, as shown in Figure 2-3. 

3. Choose Add Pages. 
The Add Pages dialog box, shown in Figure 2-4, appears. 

4. Enter a value for the number of pages you want to add. 


5. If you have created a Master Page (see “Creating a Master Page,” later 
in this chapter), select a Master Page from the Make Child of Master 
Page drop-down list. If you don’t want to use a Master Page to format 
the document, skip to Step 6. 


When you choose an option from this drop-down list, the new page 
inherits the characteristics of the selected Master Page. Note: This 
option is unavailable if you’ve changed the page size. 


Figure 2-3: 
Use the 
Properties 
panel to get 
to the 
Options 
menu. 








Figure 2-4: 
Adding 
pages to 
your 
document. 





ar 


MBER 
et 
& 








% 
































fosiect oomen i N 


Master page: 
| | None z] | 
fae |e oI 
t fee pe 
Bieeg [0 
Printer resolutione 
l| sfn] 300 =| dpi 


Creating FreeHand Documents 


Add pages... 
Duplicate % 


New Master Page 
Convert to Master Page 


Group Document with 


Help 
Rename Panel Group 


Close Panel Group 


587 


> 














Add Pages 
Number of new pages: [7 
© Page size: 


Letter fo | 
m 











Bleed size: [0 


T 








Cancel 








6. Accept the default document page size or select the Page Size radio 
button and select a different page size from the drop-down list. 


You can choose a default page size, or you can select Custom to enter 
your own values for document size. 


7. Click OK. 


FreeHand adds the pages to your document. Alternatively, you can click 
Cancel to void the operation. 


You can also add a page by clicking the Add Page button (the page with a 
plus sign in it) at the bottom of the Document window. 


You can also duplicate a page, remove a page, or convert the current page to 
a Master Page by choosing Window®Document, clicking the arrow near the 
upper-right corner of the Document tab, and then choosing the appropriate 
command from the Options menu. 


Creating a Master Page 
If you need to create a multipage document that you want to use as a Flash 
movie or as a storyboard, you can use the Document tab in the Properties 
panel to create a Master Page that you can apply to any or all pages in the 
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document. A Master Page is like a template; it has common items and attrib- 
utes that are applied to all children of the Master Page. To create a master 
document, follow these steps: 


1. If necessary, click the Document tab in the Properties panel to make it 
active. 


If the Properties panel is not open, choose Window®Document. The 
Document tab in the Properties panel appears. 


2. Click the arrow near the upper-right corner of the Document tab. 
The Options menu appears (refer to Figure 2-3). 
3. Choose New Master Page from the menu. 


FreeHand creates a blank page entitled New Master Page-01. If you don’t 
like the name, there’s not much you can do about it; the designers of 
FreeHand make sure the name is cast in stone. 


4. Create the elements that you want to appear on all pages that use this 
Master Page and then close the master page window. 


For example, you can create a text header with your client’s logo. 
You can create as many Master Pages as needed for a document by following 


the preceding steps. New Master Pages will be appended by the next avail- 
able Master Page number. 


To format an existing page using a Master Page, follow these steps: 
1. If necessary, click the Document tab in the Properties panel to make it 
active. 


If the Properties panel is not open, choose Window®èDocument. The 
Document tab within the Properties panel opens. 


2. Navigate to the page you want to format using a Master Page. 


You navigate to the page by clicking its thumbnail in the Document tab 
or by using the Hand tool to scroll from one page to another in the 
Document window. You can also choose the page number from the Go 
To Page drop-down list at the bottom of the Document window. 


3. Select the desired page from the Master Page drop-down list. 
The page inherits the characteristics of the selected Master Page. 


To convert a regular page to a Master Page, select Convert to Master Page 
from the Options menu at the top right of the Properties panel. 
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Editing a Master Page 


You’re on the home stretch of a multipage project when all of a sudden your 
boss or client wants you to change the document’s footer. Luckily, you’ve 
formatted most of the pages in the document by using a Master Page. When 
you edit a Master Page, all instances of pages to which the master is applied 
are updated as well. To edit a Master Page, follow these steps: 


1. Select a page that you formatted using a Master Page. 
2. If necessary, click the Document tab in the Properties panel to make it 
active. 
Book VI 
If the Properties panel is not open, choose Window™Document. The Chapter 2 
Document tab of the Properties panel opens. 
3. Click the Edit button. mS 
oO 
FreeHand refreshes the Document window to display the Master Page. BS 
nD = 
4. Edit the Master Page as needed. FE 5 
22 
5. To apply your changes, select another document from the Window xa 


menu on the Main toolbar or click the Close X) button for the window. 


All pages formatted with the Master Page are updated to reflect your 
edits. If you closed the window with the Master Page, the most recently 
edited page remains open. 


Changing the Document Tab Thumbnail Display 


When you create a document with multiple pages, you can display thumb- 
nails of the pages in the Document tab of the Properties panel. When you 
view pages in this manner, you can use the Page tool (a handy device we 
show you how to use in the next section, “Using the Page Tool”) to rearrange 
the order of the pages. Follow these steps to modify the way thumbnails are 
displayed in the Document tab: 


1. If necessary, click the Document tab in the Properties panel to make it 
active. 


If the Properties panel is not open, choose Window™Document. The 
Document tab of the Properties panel opens. 


2. Click one of the buttons at the lower-left corner of the Document tab: 
e The first button displays each page as a tiny thumbnail. 
e The second button displays each page as a medium-sized thumbnail. 


e The third button displays a thumbnail of the selected page only. 
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The page thumbnails are displayed according to the button you selected. 
FreeHand remembers your change the next time you open the Document 
tab. 


You can also use the Document tab of the Properties panel to set Bleed and 
Resolution. When you print a document, FreeHand places registration marks 
and crop marks according to the document size you specify. Registration 
marks are the little cross hairs placed on the sides of a document that are 
aligned to get perfect registration of all the colors in the printing process. 
Crop marks are the long tick marks at the corners of the page that tell the 
printer where to trim the printed sheet. The Bleed value is a margin for error 
for the printer’s page-trimming process. When you enter a bleed value, the 
registration marks are moved in from the edge of the page without changing 
the document size. 


If you’re using a desktop printer and you add a bleed value to the document, 
you may need to increase the page size by that amount in your printer’s 
setup dialog box, otherwise you’ll get this error message: “This document 
will not fit in the selected page size.” Refer to your printer manual to deter- 
mine the maximum resolution the printer is capable of producing as well as 
how to modify the page size. 


Using the Page Tool 


When you create a multipage document, you use the Page tool to rearrange 
the order of pages and select and delete pages. You find the Page tool — it 
looks like a document with an arrow in it — with all the other FreeHand 
tools, as you can see in Figure 2-5. To use the Page tool on a multipage docu- 
ment, do the following: 


1. Deselect all objects, place your cursor inside the Document window, 
and then right-click. 
A contextual menu appears. 

2. Choose View™Fit All. 


FreeHand refreshes the Document window to display all pages in the 
document. 


3. Select the Page tool from the Tools panel. 
4. Click a page to select it. 


After selecting a page, you can move it to a different position. This is like 
rearranging the papers on your desk. Figure 2-5 shows a multipage docu- 
ment being rearranged with the Page tool. 
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You can also use the Document tab of the Properties panel to rearrange 
pages. Open the Document tab and then switch to a view that shows thumb- 
nails of all the pages in your document. Click a page thumbnail to select it 
and then drag it to a new location. 


ae 


Opening Existing Documents 


We know. We haven’t shown you how to save a document yet, and here’s a sec- 
tion about opening them. Well, when you first begin working with FreeHand, 
you may need to open existing FreeHand documents created by someone else, 
and you usually open existing documents before you can edit and save them, 
so here goes. To open an existing document, follow these steps: 


1. Choose FileOpen. 
The Open dialog box appears. 
2. Navigate to the folder where the file is located. 


3. Select the file and then click Open. 


FreeHand displays the document and associated pages in the Document 
window. You can now edit the document. 
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Using the Document Grid 


When you create documents, you may need to enlist visual aids to help you 
place objects with precision. 


Your first line of optic defense is the document grid, which is a series of 
equally spaced vertical and horizontal dotted lines. To view the document 
grid, choose View™Grid=™Show. You can use the grid intersections as anchor 
points for items you add to a document. You can toggle the grid on and off at 
will, as well as modify other grid parameters. Note that the grid appears only 
on-screen, not in the printed document. 


After you enable the grid, you can give it a magnetic personality by choosing 
View™Grid™Snap to Grid, which causes objects you create to snap to grid 
intersections. If you’re creating an illustration for duck hunters, enabling the 
Snap to Grid feature is an easy way to get your ducks in a row. 


After you display the grid, you can modify the grid spacing to suit the docu- 
ment you are creating: 
1. Choose View™Grid™Edit. 
The Edit Grid dialog box appears. 
2. Enter a value in the Grid Size field. 
This is the new grid spacing using the default document unit of measure. 
3. Select the Relative Grid check box. 


This option is disabled by default. Selecting this option causes objects 
you move to snap to the same relative position within different grid 
spaces (that is, the objects align relative to the grid intersections rather 
than snapping to the grid intersections). Do not select this option if you 
want objects to snap to grid intersections. 


4. Click OK to apply the changes. 


FreeHand resizes the grid to the value you specified. 


Using Rulers 


FreeHand has yet another visual aid you can use: rulers. To view rulers, 
choose View™Page Rulers™Show. 

«P 
You can modify the rulers’ unit of measure by choosing View™Page Rulers 
Edit. 
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Creating guides 

After you display rulers, you can create guides to further aid in aligning 
objects in your document. You can create as many vertical and horizontal 
guides as you need, essentially making a custom grid, where the guidelines 
don’t need to be equally spaced or fill the screen. You don’t need to delete 
guides when you print the documents because the guides aren’t printed. You 
can create guidelines by dragging them from the rulers, and if needed, posi- 
tion them precisely using menu commands. 


To create a guide, follow these steps: 


1. Click one of the rulers and drag it into the Document window. 


Click the horizontal ruler to create a horizontal guide; click the vertical 
ruler to create a vertical guide. As you drag, a blue line designates the 
guide’s current position. You can use the opposite ruler to view the cur- 
rent location of the guide. 


2. Release the mouse button when the guide is in the desired position. 


A FreeHand guide is added to your document. If the guide isn’t posi- 
tioned perfectly, you can click it with the pointer tool and drag it toa 
new position. If you need to position a guide precisely, refer to the next 
section, “Editing guides.” 


If you have both the grid and guides showing, the workspace can become a 
bit cluttered. We recommend that you use only one or the other. 


You can customize the way that guides behave as follows: 


+ Snap to guides: Objects snap to guides by default. To disable snapping 
to guides, choose View™Guides™Snap to Guides. To enable snapping, 
choose the command again. 


+ Hide and show guides: When you add guides to a document, they are visi- 
ble by default. You can hide guides by choosing View™Guides™Show or 
by clicking the check mark icon to the left of the Guides row in the Layers 
panel. To view hidden guides, choose View™Guides™Show again or click 
the empty space to the left of the Guides row in the Layers panel. 


+ Lock and unlock guides: When the guides are positioned the way you 
want them, you can lock them by choosing View™Guides™Lock. To 
unlock all guides, choose the command again. You can also lock and 
unlock the guides by clicking the Lock icon in the Guides row of the 
Layers panel. 
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Figure 2-6: 
You can 
move a 
guide 
precisely 
using the 
Guides 
dialog box. 


EMBER 
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Editing guides 
If, in spite of your best efforts, a guide is in the wrong place, you can pre- 
cisely position it where you want. To reposition a guide, follow these steps: 





1. Choose View™Guides™Edit or double-click the guide that you want to 
edit. 


The Guides dialog box, shown in Figure 2-6, opens. If you have multiple 
guides in your document, they are listed by type and position. 





Guides 
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2. Select the guide you want to edit. 


The guide is highlighted. If you double-clicked a guide to open the dialog 
box, the guide is already selected. If you have a multipage document, 
you also need to enter the number of the page whose guides you want to 
edit or use the buttons at the top of the dialog box to navigate from one 
page to another. 


3. Click the Edit button. 


The Guide Position dialog box opens, showing the coordinate of each 
guide. 


4. In the Location field, enter the position (coordinate) where you want 
the guide to appear and then click OK. 


The Guide Position dialog box closes and the new location is recorded in 
the Guides dialog box. 


5. Click OK to reposition the guide. 


The Guides dialog box closes and the guides get a move on. 


When you choose View™Guides™Edit Guides, you can use the Guides dialog 
box to add a guide, remove a guide, or release a guide (turn it into an object). 
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Adding Text to Vour Illustration 


When you use FreeHand to create an illustration, you can use the Text tool 
to add text to vector and bitmap objects. You can do so much with text in 
FreeHand that it truly boggles the mind. This section gets you up and run- 
ning with the Text tool; we show you the fancy stuff in Book VI, Chapter 3. To 
add text to your document, follow these steps: 


1. Select the Text tool — it looks like a capital letter A — from the Tools 
panel. 


2. Click the location where you want the text to appear in your document. 


Book VI 
3. Type. Chapter 2 
It’s really that simple. 

4. When you’re finished typing, click anywhere outside the text box. F = 
woo 

The Text tool reverts to the Pointer tool, which you can now use to Ba 
move the text box to another location. 22S 
E 

XA 


After you create text, you can change text characteristics to create wonder- 
fully artistic text for your illustration. See Book VI, Chapter 3 for text manipu- 
lation tricks. 


Creating Predefined Shapes 


The easiest way to add vector shapes to your illustrations is by using the 
shape tools. In this section, we show you the tools you can use to add 
shapes to your illustrations, as well as how to add the shape to a document. 
Some of the tools have parameters that you can define, such as the number 
of sides in a polygon. We show you how to set these parameters and more in 
Book VI, Chapter 4. 


You can use the following tools (available from the Tools panel) to add 
shapes to your illustrations: 


+ Rectangle tool: You use this tool to add rectangles (and squares) to your 
illustrations. The rectangles can have rounded corners or not. 


+ Polygon tool: You use this tool to add shapes with three or more sides to 
your illustrations. You can specify the number of sides and whether you 
want a polygon or a star. To access the Polygon tool, click and hold the 
Rectangle tool and then select the Polygon tool from the pop-up menu. 


+ Ellipse tool: You use this tool to draw ovals (or circles), or, as high-brow 
designers refer to them, ellipses. 
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Figure 2-7: 
You use 
these tools 
to add 
shapes to 
your 
illustrations 
and color 
them. 














To add a shape to your document, follow these steps: 


1. Select a drawing tool from the Tools panel. 


If you click the tool once, you draw a shape using the last settings speci- 
fied for the tool. If the tool has definable parameters, you can choose new 
parameters by double-clicking the tool. Tools that have modifiable param- 
eters have an inverted L to the upper right of their icons. Tools with other 
tools hidden underneath them have a gray arrow to the bottom right of 
their icons. The drawing tools are shown in Figure 2-7, along with the 
boxes you use to color shapes and outlines. 


Pointer tool 


Pen tool 
Rectangle tool 
Ellipse tool 


Fill color box 
Stroke color box 


2. Click the place inside the document where you want the shape to 


appear and then drag diagonally to create the shape. 


As you drag, FreeHand creates a preview of the shape. If you hold down 
the Shift key while creating a shape, the shape width and height remain 
equal. In other words, if you hold down the Shift key while using the 
Rectangle tool, you create a square; hold down the Shift key while using 
the Ellipse tool, and you create a circle. 
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3. Release the mouse button when the shape is the desired size. 


FreeHand adds the shape to your document. After creating a shape, you 
can move it to a different location with the Pointer tool, or you can 
modify the shape by selecting it and setting available properties in the 
Object tab of the Properties panel. We show you how to modify a shape 
by using the Object tab in Book VI, Chapter 4. 


Creating Custom Shapes with the Pen Tool 


You use the Pen tool to create free-form vector objects. The Pen tool gives 
you point-to-point control over the shape you create. You can use the Pen 
tool to create an open path or a closed path (the beginning and ending 
points meet to create an outline). You can even use the Pen tool to trace an 
image on another layer. (We show you how to add layers to a document in 
the upcoming section, “Working with Layers.”) 


To create a shape with the Pen tool, follow these steps: 


— 


. Select the Pen tool from the Tools panel. 


. Click the place in the document where you want to add the first point. 


When you click, you create a straight point; if you click and drag, you 
create a curve point. Create a straight point when you want to create a 
straight line segment, a curve point when you want a curved line segment. 


Click the spot where you want the second point to appear. 


Remember to click and drag if you want a curve point. A curve point has 
handles that you use to modify a curved line segment. You modify han- 
dles with the Pointer tool or with the Subselection tool. The Subselection 
tool — the white-headed arrow at the top right of the Tools palette — is 
covered in detail in Book VI, Chapter 4. 


. Continue adding points to define your shape. 


You can double-click the Pen tool icon to select the Show Pen Preview 
option, which provides a preview of the path that will be created when 
you make the next point. 


To complete an open path, double-click to define the last point; to 
complete a closed path, click the first point. 


Your shape is finished. Now you can use the Pen tool to create another 
shape or to modify the shape that you just created. 
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If you’re looking to create straight lines in combination with curved shapes, 
then the Bezigon tool may allow you to work more quickly. To use it, click and 
hold the Pen tool in the Tools panel. A pop-up menu appears, and you can 
select the Bezigon tool. The Bezigon tool works similarly to the Pen tool, but 
with one major difference: If you hold down the Alt key when creating points, 
the subsequent point is automatically constructed as a uniform curve! 


Using the Line Tool 


You use the Line tool to create straight lines. You can modify the line style 
and width in the Object tab of the Properties panel, a task we describe in the 
upcoming section, “Creating Outlines.” 


To use the Line tool, follow these steps: 


1. Select the Line tool from the Tools panel. 


2. Click the point where you want the line to begin and drag to create 
the line. 


As you drag the tool across the document, FreeHand creates a preview 
of the line. If you hold down the Shift key while using the tool, you con- 
strain the line to a predefined angle. (To predefine the angle, choose 
File>Document Settings™Constrain and enter the value in the dialog 
box.) As you drag, a filled square appears at the pointer-end of the line 
whenever it gets to a 45- or 90-degree angle. 


3. Release the mouse button when the line is the desired length. 


FreeHand creates a straight line using the old tried-and-true method of fol- 
lowing the shortest distance between the beginning and ending points. 


Coloring Shapes 


If you use a shape tool that creates a closed path or use the Pen tool to 
create a closed path, you can add color to the resulting shape by defining a 
fill. You can also add a fill to an open path. (Choose Preferences™Object and 
select the option to Show Fill for New Open Paths to add a fill automatically 
when you draw an open shape.) To add color to a shape, you use the Fill 
Color box. 


Using the Fill Color box 


The Fill Color box is near the bottom of the Tools panel, yet it’s one of the 
most important tools in the whole lot. After all, a shape without color is kind 
of drab. Of course, you can opt for the minimalist look and create a shape 
with no fill and a stroke, in which case, you get an outline. 
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To define a fill for an object, follow these steps: 


1. Click the Fill Color box (the box to the right of the paint bucket) in the 
Colors section of the Tools panel. 


The color picker appears. 
2. Move your cursor over the color cubes. 


Your cursor becomes an eyedropper. As you move your cursor over the 
color cubes, the window in the upper-left corner of the palette refreshes 
and displays the color your cursor is currently over. A ToolTip displays 
the color’s hexadecimal value and RGB value, as shown in Figure 2-8. If 
you’re working for print instead of for the Web, you may wish to use Book VI 
Swatches instead of the default color cubes. Click the triangle at the top Chapter 2 
right of the color picker and select Swatches from the pop-up window to 
use swatches. See your documentation for details on using Swatches. 
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Figure 2-8: 
You can add 
color to an 
object by 
defining a 
fill. 








3. Click a color to select it or click the No Color button (the box with the 
diagonal red slash through it next to the color wheel at the top of the 
window) if you want a shape with just an outline (stroke). 


The swatch in the Fill Color box refreshes to show the color you selected. 
This color is used to fill any new shapes you create until you select a dif- 
ferent fill color. If you select No Color, a diagonal red slash (/) appears in 
the Fill Color box. 
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Changing a shape’s fill color 
If a shape’s fill color doesn’t suit your (or your client’s) fancy, you can easily 
change it. You can also create a custom fill by using the Fill button in the 
Object tab of the Properties panel, a colorful operation we show you how to 
do in Book VI, Chapter 4. 


Follow these steps to change a shape’s fill color: 


1. Select the shape. 
2. Click the Fill Color box (refer to Figure 2-8). 


The color picker appears, and your cursor becomes an eyedropper as 
you move it over the palette. 


3. Click a color to select it. 


You can click in the color picker. The swatch in the Fill Color box 
changes to the color you selected, as does the color of the shape you 
selected. Remember: You can revert from a filled shape to an unfilled 
shape by clicking the No Color button. If you select No Color, the diago- 
nal red slash appears in the Fill Color box. 


Creating Outlines 


Create an object with no fill, select a stroke color, and you’ve got an outline. 
You use the Stroke Color box to select an outline color for an object. If you 
need to change the stroke width or style, you can access the stroke’s proper- 
ties through the Object tab in the Properties panel, which is covered in 
detail in Book VI, Chapter 4. 


Using the Stroke Color box 


You use the Stroke Color box to choose a color for the outlines of the shapes 
you add to your illustration. You can select any color from the color picker 
or the System Color Picker (covered in Book VI, Chapter 6), or you can 
choose to go sans stroke. 


Follow these steps to select a stroke color: 


1. Click the Stroke Color box next to the icon that looks like a pencil. 
The color picker appears. 
2. Move your cursor over the palette. 


Your cursor becomes an eyedropper. As you move your cursor over the 
color swatches, a ToolTip displays the color’s hexadecimal and RGB 
values. The window in the upper-left corner of the color picker refreshes 
to show the color your cursor is currently over. 
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3. Click a color to select it. 


If the shape you are creating won’t have a stroke, click the No Color 
button. After you select a color, the palette closes, and the selected color 
is displayed in the Stroke Color box. If you click the No Color button, a 
diagonal red slash appears in the Stroke Color box. The color you choose 
is applied to all shapes you create until you follow the preceding steps to 
select another stroke color. 


Changing an object’s stroke color 

If you create an object and the object’s outline (stroke) is not to your liking, 

you can change it at any time. You can also add a stroke to a shape that Book VI 
doesn’t have one. Chapter 2 


To change the stroke color of an object: 


— 


. Select the object by clicking it. 
2. Click the Stroke Color box. 
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The color picker appears. 
3. Move your cursor over the palette. 


Your cursor becomes an eyedropper. As you move your cursor over the 
color swatches, a ToolTip displays the color’s hexadecimal and RGB 
values. The window in the upper-left corner of the color picker refreshes 
to show the color your cursor is currently over. 


4. Click a color to select it. 


To remove a stroke from an object, click the No Color button. You can 
also choose a color from the System Color Picker by clicking the System 
Color Picker button to the right of the No Color button. After you select 
a color, the color picker closes and the color is applied to the object’s 
outline. 


Working with Layers 


Layers are like thin sheets of clear plastic on top of your illustration. You can 
see what’s underneath the plastic. In FreeHand, you use layers to organize 
your objects. You can also use layers to trace an object, such as a complex 
bitmap image, that’s on a lower layer. Layers simplify your life as a FreeHand 
illustrator, especially when you create a document with a lot of objects. 


When you create a new document, FreeHand gives you three layers to work 
with: Foreground, Background, and Guides. Only objects on the Foreground 
layer, or layers above the separation line, are printable. The separation line 
is a horizontal black line in the Layers panel. 
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Figure 2-9: 
Use the 
Layers 
panel to 
manage the 
layers in 
your 
document. 


«e 


You use the Layers panel to create and otherwise manage layers. To open 
the Layers panel, choose Window™Layers. The Layers panel is shown in 
Figure 2-9. 
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Creating layers 

You can create a new layer whenever you need it. When you create a new 
layer, it becomes the active layer until you select another layer to work with. 
You create a new layer by following these steps: 


1. 


Choose Window™Layers. 


The Layers panel becomes activated. 


. Click the Options button (the bulleted list icon in the upper-right 


corner of the panel). 


The Options menu appears. 


. Choose New. 


FreeHand creates a new layer with the default name of Layer followed by 
the next available layer number, such as Layer-1. You’ll know it’s the active 
layer because there will be a little pen next to the name of the layer. 


. Enter a new name for the layer by clicking and dragging to highlight 


the default name, typing a new name, and pressing Enter. 


This step is optional. You can rename the layer at any time. We strongly 
advise you to get in the habit of giving your layers descriptive names, 
especially if you’re creating documents with multiple layers. 


You can duplicate the currently selected layer and all objects on it by open- 
ing the Layers panel, clicking the Options button (the bulleted list icon in the 
upper-right corner of the panel), and then choosing Duplicate from the 
Options menu. 
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When you select a layer, it becomes the active layer. You can use the Layers 
panel to perform any of the following tasks: 


+ Hide and unhide objects: Click the check mark in the left column to 
hide all objects on the selected layer. Click the column again to unhide 
the layer. 


+ Display objects as keylines: To display objects on a selected layer as 
keylines (they look like outlines with an X through them), click the filled 
dot in the center column of the Layers panel. The filled dot becomes 
hollow and a keyline of each shape is displayed. 


+ Lock and unlock layers: Click the open padlock icon in the third column 
to lock the layer. After you lock a layer, the icon changes to a closed pad- 
lock, and you cannot edit or select objects on the layer. Click the padlock 
again to unlock the layer. 


+ Hide and display layers: Click the Options button (the bulleted list icon 
in the upper-right corner of the Layers panel) and choose All Off from 
the Options menu to hide all layers, or choose All On to display all 
hidden layers. 


Editing layers 

When you use layers to organize a complex illustration, objects on top layers 
eclipse underlying objects on lower layers. You use the Layers panel to 
rearrange the order of layers and to perform other tasks, such as merging 
layers. You can also merge objects into a single layer when you’ve got every- 
thing just the way you want it. 


To edit layers, choose Window™Layers to activate the Layers panel (if it’s not 
already open and expanded) and then perform any of the following tasks: 


+ Move layers: Select a layer in the Layers panel and drag it up or down to 
a different position to change the way objects are displayed. 


+ Make layers nonprintable: Select a layer in the Layers panel and drag it 
below the separation line to make the layer nonprintable. 


+ Move objects between layers: You can move an object to a different 
layer by selecting it in the Document window, and then in the Layers 
panel, click the name of the layer to which you want to move the object. 


+ Merge layers: To merge several layers into a single layer, select the 
layers in the Layers panel, click the Options button (the bulleted list 
icon in the upper-right corner of the Layers panel), and choose Merge 
Selected Layers from the Options menu. Hold down the Shift key to 
select multiple contiguous layers; hold down the Ctrl key to select non- 
contiguous layers. 
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+ Merge foreground layers: To merge all foreground layers into a single 
layer, click the Options button (the bulleted list icon in the upper-right 
corner of the Layers panel) and then choose Merge Foreground Layers 
from the Options menu. 


+ Remove layers: You can remove a selected layer by clicking the Options 
button (the bulleted list icon in the upper-right corner of the Layers 
panel) and choosing Remove from the Options menu. If the layer you are 
removing contains objects, FreeHand displays a warning dialog box to 
that effect. Click Yes to delete the layer and all objects on it. 


Saving Documents in FreeHand 


When you finish creating a document, or at any point while you’re working, 
you can save your document. You can save the document as a FreeHand file, 
a FreeHand template, or an Editable EPS file. If you save the document as a 
FreeHand file, you can edit the elements in the document when you reopen it. 
When you open a document saved as a template, you can use the elements in 
it as the basis for a new document. Saving a document as a template is useful 
if you do repetitive work that uses the same elements in all the documents, 
such as a client’s logo and address. You add additional elements to the tem- 
plate as needed and use the Save As command to save the revised template 
as a document. When you save the file as an Editable EPS file, you can work 
with the file in another illustration program that supports the EPS format, 
such as Adobe Illustrator or CorelDraw. When you save a document in any of 
these formats, you can later reopen and edit the document. Note: You are 
limited to saving a single-page document when you choose the Editable EPS 
format. 


In addition to saving documents, you can also export FreeHand documents 
into a number of different graphics formats, including JPEG, GIF, PNG, TIF, 
and BMP. 


Saving FreeHand files 


You can save a FreeHand document whenever you need to. When you save a 
document that has been edited since it was last saved, an asterisk (*) appears 
after the document’s name in the document title bar. To save a document, 
follow these steps: 


1. Choose File™Save or press Ctrl+S. 


The Save Document dialog box opens. 


2. Enter a name for the document and navigate to the folder where you 
want to save the file. 
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3. Choose the file format you want the document saved as. 


You can choose from the following: FreeHand Document (. £h11), 
FreeHand Template (. £t11), or Editable EPS (. eps). 


4. Click the Save button. 


FreeHand saves the document to the specified folder. 


When you save a previously saved file, the Save Document dialog box does 
not appear, and the file is saved using the same filename in the same location 
as the previous iteration of the file. 


You can save your work using a different filename. This option is handy 
when you’re making lots of edits and saving a file frequently. You can save a 
master version of the file and then save a working version of the file under a 
different filename. If you run into a computer glitch and the working version 
of the file becomes corrupt, you can always revert to the master copy (or 
another previous version) of the file. You also use the Save As command to 
save a FreeHand template that you have added elements to in order to 
create a new document. To save a file with a different filename: 


1. Choose File™Save As or press Ctrl+Shift+S. 


The Save Document dialog box opens. 


2. Enter a name for the document and navigate to the folder where you 
want to save the file. 


3. Choose the file format you want the document saved as. 


You can choose to save the document in one of the following formats: 
FreeHand Document (. £h11), FreeHand Template (. £t11), or Editable 
EPS (. eps). 


4. Click the Save button. 


FreeHand saves the renamed document to the specified folder. 


Computers can be cranky creatures and may crash when you least expect it. 
In order to avoid losing hours of work, save your work early and save your 
work often. 


Exporting files in other formats 

You can create FreeHand illustrations for a wide variety of uses. You can 
create images for the Web, illustrations for print, and Flash movies, to name a 
few. When you need to use the finished illustration for a specific application, 
you export the file in the necessary format. You can also save the original as a 
previous-version FreeHand document. To export a file, follow these steps: 
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1. Choose FileExport. 
The Export dialog box appears. 


2. Enter a name for the file and specify the folder to which you want the 
file saved. 


3. Choose the export file format. You can choose to export the file as one 
of the following: 


e A bitmap file using the BMP, GIF, JPEG, PNG, or TIFF file formats. 
e A vector file using the EPS or EMF file format. 


e AFlash movie using the SWF format. You can import the end result 
into Macromedia Flash or embed the movie in an HTML document 
for viewing on the Internet. 


e A FreeHand 8, 9, or 10 file. 

e An Adobe Illustrator file, versions 1.1, 3.0/4.0, 5.x, 7.x, or 8.8. 
e A PICT file (Macintosh only). 

e A DXF file for use in 3D applications. 


e A PDF file for viewing with the Adobe Acrobat Reader. The file may 
also be printed from the Acrobat Reader. 


e An RTF file for use in a word-processing application. 
4. Click the Save button. 


FreeHand exports the file in the format you specify. 


Chapter 3: Using the FreeHand MX 
Text Tools 


In This Chapter 


Creating text 

Editing text 

Creating text styles 
Creating text columns 
Converting text to paths 
Aligning text to a path 


Í you need to add text to an illustration, you use the Text tool. If you want 
the text to jump up and get someone’s attention, FreeHand MX gives you 
the tools to create really cool-looking text. You can convert text to vector 
objects, align text to paths, and much more. In fact, you can do so many 
cool things with text in FreeHand that we have space to show you only the 
most important features of working with text in FreeHand. 


In this chapter, we show you how to stylize your text by modifying fonts, 
point size, and more. We explain how to use the Object tab of the Properties 
panel to modify your text, as well as how to format your text. And if you 
want to make your text jump through hoops, we show you how to do that 
by aligning text to a path. 


Creating Text with the Text Tool 


When you need to add text to an illustration, the first step is to call on the 
Text tool. After you select the Text tool, you can create an auto-expanding 
text box that grows wider as you enter more text, or you can create a text 
box that is sized to fit a specific area of the illustration, in which case 
FreeHand automatically wraps text to a new line as needed. You can specify 
the font size, color, and other text attributes before or after you enter text. 
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Creating auto-expanding text boxes 

When you select the Text tool and create text in the document, the default 
text block (box) is auto-expanding, which means the box gets wider as you 
enter more text. To create an auto-expanding box of text, follow these steps: 


1. 


Select the Text tool from the Tools panel. 


The Text tool is identified by a capital A. As you move the tool into the 
Document window, your cursor becomes an I-beam. 


. Click the spot in your illustration where you want the text block to 


begin. 


A flashing vertical line signifies that FreeHand is ready for you to enter 
text. 


. Begin typing. 


Your text appears in the document. 


. Press Enter to create a new line. 


Any text you type now appears on a new line. If you want a text box that 
automatically wraps text from line to line, you need to create a fixed-size 
text box, which we show you how to create in the next section. 


. Click anywhere outside of the text box when you are finished enter- 


ing text. 


The Pointer tool is selected. 


Creating fixed-size text boxes 

When you create a fixed-size text box, you constrain the text to the size of the 
box. When text reaches the side of the box, FreeHand automatically wraps 
new text to the next line. To create a fixed-size text box, follow these steps: 


1. Select the Text tool from the Tools panel. 


2. Click the point in the illustration where you want the text to appear 


and then drag diagonally to define the size of the text box. 


As you drag, FreeHand displays a dashed rectangle that gives you a pre- 
view of the box’s current size. 


3. Release the mouse button when the text box is the desired size. 


FreeHand creates a rectangular bounding box. 
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Figure 3-1: 


A tale of two 
text boxes. 
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4. Begin typing. 


When you enter enough text to reach the side of the text box, FreeHand 
wraps the text to the next line. 


5. Click anywhere outside of the text box when you finish entering text. 


FreeHand reverts to the Pointer tool, which you can use to resize or 
move the text box. Figure 3-1 shows an auto-expanding text box and a 
fixed-size text box. 


You can add additional text to a text box by selecting the Text tool or Pointer 
tool and clicking the text box at the point where you want to add text. If you 
double-click a text box with the Pointer tool, it reverts to the Text tool. If 
you’re using the Text tool, you need only click once. 


You can remove any empty text blocks from your document by choosing 
Xtras™Delete™Empty Text Blocks. 





(Auto-expanding text block 
ü 


Fixed-size text block 




















Using Text Rulers 


ar 


When you create text, FreeHand displays a text ruler above the text. The text 
ruler looks similar to the ruler you find at the top of the workspace of popu- 
lar word-processing programs and is used in a similar manner. You can 
change the indent of paragraph text and change the position of tabs by drag- 
ging the icons at the top of the text ruler. After you finish entering text and 
select another tool, the text ruler is no longer visible. To view the text ruler, 
double-click the text box with the Pointer tool. Figure 3-2 shows a block of 
text with its attached text ruler. 


Text rulers are enabled by default. Choose View® Text Rulers to hide text 
rulers from view. Choose the command again to show text rulers. 
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Figure 3-2: 
Use the text 
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Checking the Spelling of a Text Selection 


Figure 3-3: 
Checking for 
misspelled 
words. 





If you’re like many designers, when you enter text, your fingers fly across the 
keyboard so fast that you end up with some spelling errors. To safeguard 
against exporting a document with spelling errors, you can spell check your 
text selections: 


1. Choose Text™Spelling. 
The Spelling dialog box appears. 
2. Click the Start button. 


FreeHand begins checking your document for spelling errors. If it finds a 
spelling error, the suspect word is highlighted in the field at the top of 
the dialog box. Possible substitutes are listed in a field underneath the 
suspect word, as shown in Figure 3-3. 





[tarot] change | 


A) Ignore all | Change anj 


J sas] 


Setup. || 





Add 


Word Found : Wë 
tme only 




















3. If the spell checker finds a word not listed in its dictionary, you can 
choose one of the following options by clicking the appropriate 
button: 

e Ignore: If you choose this option, the spell checker ignores the word 
and checks the rest of the document for errors. 
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e Change: Choose this option after you select a word from the sugges- 
tions list so that the spell checker can replace the suspect word with 
the correctly spelled one that you selected. 


e Ignore All: If you choose this option, the spell checker ignores this 
and all future instances of the suspect word. This option is handy 
when your document has several instances of a person’s name or 
something else that is not in the dictionary but is spelled correctly. 


Change All: Choose this option when you select a word from the sug- 
gestions list so that the spell checker can replace this and all future 
occurrences of the suspect word. 


e Add: If you choose this option, the spell checker adds the suspect 
word to its dictionary. 


After you click a button, the spell checker continues searching the rest 
of the document for misspelled words. 


You can select some basic preferences for the spell checker by clicking the 
Setup button from the main Spelling dialog box. Those options include 


+ Find Duplicate Words: When selected, this feature ensures that the spell 


checker shows you when the same word appears sequentially (such as 
“the the” appearing in a sentence). By default, this option is selected. 


Find Capitalization Errors: If selected, this option causes the spell 
checker to look for anomalies in capitalization, including capital letters 
in the wrong place and two sequential capital letters. By default, this 
option is selected. 


Ignore Words with Numbers: As you might expect, when selected, this 
option ensures that the spell checker ignores words that include num- 
bers in them. By default, this option is selected. 


Ignore Internet and File Addresses: If selected, this option ensures that 
the spell checker ignores Web addresses, such as www. dummies. com, 
and file addresses, such as C:\Program Files. By default, this option 
is selected. 


Ignore Words in UPPERCASE: This option ignores words or acronyms 
that are all in uppercase letters. By default, this option is selected. 


Add Words to Dictionary: This is the only option that is not a check 
box. The two options available for this tool are selectable as radio but- 
tons. The first option, Exactly as Typed, adds words to the dictionary 
just as they are typed. The All Lowercase radio button adds words to the 
dictionary in lowercase, no matter how they look when they are added. 
By default, the Exactly as Typed option is selected. 
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P 
s You can find and replace text and other objects in your FreeHand documents 


by choosing Edit®Find and Replace®Text. Follow the prompts in the dialog 
box to quickly locate text in your document. 


Editing Blocks of Text 


After you create a block of text, you can use the Pointer tool to move it or to 
resize a fixed-size text box. You can also convert an auto-expanding text box 
to a fixed-size box, and vice versa. 


Moving and deleting text 


After you create a block of text, you can move or delete it as needed by fol- 
lowing these steps: 


1. Select the Pointer tool from the Tools panel and then click the text 
block to select it. 


A bounding box appears around the perimeter of the text box. 
2. To move the selected text box, click it and drag it to a new location. 


The cursor changes to a four-headed arrow when you place it over the 
bounding box to click and drag. 


3. To delete the text box, press the Delete or Backspace key. 


The text box is gone. Alternatively, you can delete a selected text box by 
choosing Edit™Clear. 


Resizing text boxes 

If you create fixed-size text boxes, you can modify the width and height as 
needed. To resize a fixed-size text box, select the text box with the Pointer 
tool and do one of the following: 


+ Resize a text box: To resize the text box, click and drag the corner 
handle. The text reflows to the new dimensions of the text box. 


+ Proportionately resize a text box: To proportionately resize the text 
box, click the handle on any corner and then, while holding down the 
Shift key, drag away from the center of the text box to make it larger or 
toward the center to make it smaller. Text inside the box reflows to the 
new dimensions. 


When you resize a text box by using one of these methods, the text size 
remains unchanged. You can resize the text as you resize the text box by 
doing the following: 


NING! 
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1. Select the Pointer tool from the Tools panel and then click the text 
block to select it. 


FreeHand draws a bounding box around the text box. 


2. Click the handle at any corner of the text box and, while holding 
down the Shift and Alt keys, drag the handle until the text box is the 
desired size. 


The text box is proportionately resized, and the text is resized as well. 


If you drag the middle handle on either side, or the center top or bottom 
handle, you don’t resize the text, you change the text spacing. If you move 
either of these handles toward the center of the text box, individual charac- 
ters overlap, leaving you with a jumbled, illegible mess. If you drag the top 
center or bottom center handle, you adjust the leading (line spacing) of the 
text. Moving the handles toward the center of the box can create overlap- 
ping lines, but dragging outward from the center can give your text a light, 
airy feel by increasing the distance between lines. 


Changing text box characteristics 

You can change the characteristics of a text box at any time. For example, if 
you have a fixed-size text box, you can convert it to an auto-expanding text 
box, and vice versa. 


To convert an auto-expanding text box to a fixed-size text box, follow these 
steps: 


1. Select the Pointer tool from the Tools panel and then click the text 
box to select it. 


2. Double-click one of the middle handles on the sides of the text box or 
one of the middle handles on the top or bottom of the text box. 


You can now resize the text box by clicking any corner handle and drag- 
ging. Remember: You can proportionately resize the text box by holding 
down the Shift key while dragging. 


Any text that is added that doesn’t fit within a fixed-size text block will not 
be visible, and the Text Overflow icon will appear at the bottom-right corner 
of the text block. Stretch the text block from a corner point to see the added 
text. 


To convert a fixed-size text box to an auto-expanding text box, follow these 
steps: 


1. Select the text box with the Pointer tool. 
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2. Double-click one of the middle handles on the sides of the text box or 
one of the middle handles on the top or bottom of the text box. 


FreeHand shrink-wraps the box around the text inside. When you add 
additional text to the box, the box expands to accommodate the addi- 
tional text. Remember: You can create a new line by pressing Enter. 


Formatting Text 


When you create text for a FreeHand document, you can format the text 
before you type it in, or you can select all the text in the text box after the 
fact and do your formatting then. You can specify the font style, font size, 
font color, paragraph alignment, and much more. 


You have three tools at your disposal for choosing text attributes: menu 
commands, the Object tab of the Properties panel, and the Text toolbar. We 
give you a brief overview of the menu commands and the Text toolbar, but 
we focus on the Properties panel, FreeHand’s formatting powerhouse: 


+ Menu commands: You can use the menu to specify font type, font size, 
style, paragraph alignment, leading, baseline shift, and case (capitaliza- 
tion). To format selected text using a menu command, choose Text, 
choose a category from the menu, and then choose the desired com- 
mand from the submenu. For example, choose Text™Size™12 to change 
the font size to 12. 


+ The Text toolbar: You use the Text toolbar to select a font, specify the 
font size and paragraph alignment, and so on. You can even use the Text 
toolbar to attach text to a path, as described in the section, “Working 
with Text and Paths,” later in this chapter. The Text toolbar is shown in 
Figure 3-4, and like other FreeHand toolbars, you can leave it floating in 
the workspace or dock it below the menu bar. To use the Text toolbar, 
choose Window™Toolbars™Text. 
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Figure 3-5: 
You use the 
Object tab 
in the 
Properties 
panel to 
format text 
and much 
more. 
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+ The Object tab in the Properties panel: You can choose your font type, 
style, size, and alignment by using the Object tab in the Properties 
panel. You can choose these parameters before or after creating a text 
box. To open the Properties panel, choose Window™Object. Make sure 
that your text box is selected, and you'll see a text block appear in the 
Object tab, as shown in Figure 3-5. Choose from one of the five buttons 
to specify parameters when working with text: 


Character: You use this section of the Object tab to choose font type, 
font size, style, paragraph alignment, leading, kerning, and baseline 
shift. You can also apply effects to text in this section, as well as 
choose a text style. The character button is the top one (with “abc” 
on it). 


Paragraph: You use this section of the Object tab to specify para- 
graph spacing and indentation. 


Spacing: You use this section of the Object tab to scale characters 
and specify spacing between letters and words. 


Columns and Rows: You use this section of the Object tab to display 
a block of text as columns and rows. 


Adjust Columns: You use this section of the Object tab to specify 
how text flows between columns and rows. 
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Figure 3-6: 
Choosing a 
font type in 
the Object 
tab in the 
Properties 
panel. 


Choosing a font type, size, and style 


You 


can choose a font style and size before you begin typing or after you 


create a block of text. If you choose the font style after creating your text, 


you 


have the added benefit of seeing a preview of the font, as it will be 


applied to your text. To choose a font style, follow these steps: 


1. 


2. 


3. 


4. 


Create a block of text. 
Select the Text tool, click inside the document, and type. 
Click anywhere outside the text box to deselect the Text tool. 


The block of text is still selected, and the Pointer tool is now the active 
tool. 


Click the Character button in the Object tab of the Properties panel. 


The character properties are displayed. If the Properties panel is not 
open to the Object tab, choose Window™Object or press Ctrl+F3. 


Click the triangle to the right of the Font Name field and scroll 
through the drop-down list. 


The fonts you have installed on your system show up in the Font Name 
drop-down list. As you scroll through the list, the first few words of the 
selected text are displayed with the font style applied, as shown in 
Figure 3-6. 
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Click a font name to select it. 
Select a size from the Text Size drop-down list. 


You can also enter your own value in this field if you want the text to be 
sized differently than the preset values. If you type a value into this field, 
you must press Enter to apply the size. 
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Figure 3-7: 
You can 
create a 
custom text 
style using 
the Styles 
panel. 
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7. Select one of the following options from the Style drop-down list: 


Plain: Choose this default style if you like plain text. 
Bold: Choose this style to boldface the text. 


Italic: Choose this style to italicize the text. 


Boldlitalic: Choose this style to boldface and italicize the text. 


8. Close the panel to apply the characteristics to the text. 


You can also use this section of the Object tab to apply effects to the 


text, apply a style to the text, and more. 


If you like to mix and match font types, styles, and so on, within a block of 
text, double-click the text to activate the Text tool and select the letters or 
words in the block of text that you want to style differently. After selecting 
the letters or words, open the Object tab of the Properties panel to set the 


parameters for the text selection. 


Creating text styles 


When you add text to a document, FreeHand uses the default Normal Text 
style to format the text. You can modify the text by using menu commands 
or the Object tab in the Properties panel; however, the changes apply only to 
the block of text you are creating. If you’re creating a document with lots of 


text that spans different pages, formatting each new block of text can 


become a nuisance, especially when they’re all the same. After you decide 
on text formatting options for a document, you can save the formatting as a 


style, which you can then apply to any block of text with a click of the 
mouse. To create a text style, follow these steps: 


1. Select the Text tool from the Tools panel and create a block of text. 


2. Format the text using the font style, size, and other attributes that will 
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remain constant throughout the document. 
3. Choose Window® Styles or press Shift+F11. 


The Styles tab of the Assets panel, shown in Figure 3-7, opens. 
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4. Click the Options button (the bulleted list icon in the upper-right 
corner of the panel) and choose New from the Options menu. 


A new entry, in the form of a box with Aa in the middle of it, appears in 
the Styles tab. In the Object tab of the Properties panel, you'll see that 
the style is given the default name Style, appended by the next available 
style number (Style-1, for example). If you’re creating more than one 
style for the document, you can rename the style to better reflect what 
the style applies to. 


After you create a text style, you can apply the style to any text box on any 
page in your document. To apply a text style, follow these steps: 


1. Select the block of text to which you want to apply a style. 
2. Choose Window™Styles or press Shift+F11. 


The Styles tab of the Assets panel opens, and all styles currently in use 
for the document are displayed. 


3. Click the name of the style you want applied to the text. 


The text is formatted to the style’s parameters. 


In FreeHand MX, renaming a style is a bit more complicated than it was in 
previous versions. By default, items in the Styles tab are shown in “Previews 
only” format, which is to say they show a small preview of the style itself. To 
rename a style, you must first change the layout of the styles to either 
“Compact list views” or “Large list views” by clicking the Options button (the 
bulleted text icon in the top right of the Assets panel) and selecting a layout 
option. After this is complete, you can double-click your style, enter a name 
for it, and press Enter to save it. 


Choosing a text color 


If language can be colorful, so should text. When you add color to text, you 
accentuate the text and make it stand apart from other elements in an illus- 
tration. You can apply the same color to an entire block of text, or select 
individual letters from a block of text and choose a different color for each. 
To specify the color for a block of text, follow these steps: 


1. Select the Pointer tool from the Tools panel and then click the text 
box to select it. 


If you want to apply a color only to an individual letter or word in a text 
box, double-click the text box to activate the Text tool and then highlight 
the letter or word you want to select a color for. 


2. Click the Fill color box (next to the paint bucket) in the Tools panel. 


The color picker appears. 
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3. Click a color to select it. 


You’ve got colorful text! 


Some illustrators like to choose a different color for the first letter in a para- 
graph to draw the viewer’s eyes to the paragraph. You can also draw atten- 
tion to the first letter in a paragraph by specifying a larger font size. 


Aligning your text 

When you create a block of text, the text is aligned by default to the left side 
of the text box. You can modify the text alignment to suit the illustration that 
you are creating. You can change the text alignment at any time by following 
these steps: 


1. Using the Pointer tool from the Tools panel, select the block of text 
whose alignment you want to modify. 
2. Click the Character button in the Object tab of the Properties panel. 


The character properties are displayed. If the Properties panel is not 
open to the Object tab, choose Window™Object or press Ctrl+F3. The 
Character button is the one with “abc” on it. 


3. Click the appropriate button to apply one of the following alignments 
to the selected text: 


e Left: Aligns the text to the left side of the text box; this is the default 
alignment. The right side of the text will be ragged. 


e Center: Aligns each line of text to the center of the text box. 


e Right: Aligns text to the right side of the text box. The left side of the 
text will be ragged. 

Justify: Spaces the text so that it flows to fill the text box, leaving no 
ragged edges. 


Changing paragraph settings 

When you create several paragraphs of text in a block, you can change the 
formatting of the paragraphs to suit your illustration. You can modify the 
paragraph indentation and how the tabs are spaced by using the Object tab 
of the Properties panel: 


1. Select the block of text whose paragraph settings you want to modify 
by clicking it with the Pointer tool. 

2. Choose Window™Object or press Ctrl+F3. 
The Properties panel opens to the Object tab. 
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Figure 3-8: 


Use the 
Paragraph 
section to 
set 
paragraph 
indents and 
more. 


3. Click the Paragraph button. 


Above 


The Paragraph section of the Object tab opens, as shown in Figure 3-8. 
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Enter a value in the Above field, the Below field, or both. 


The values you enter in these fields determine how much space, in 
points, appears above or below the paragraph. If you enter values in 
both fields, FreeHand creates a space above and below each paragraph 
in the text box. 


Select the Hanging Punctuation check box to place punctuation, such 
as quotation marks, outside of paragraph margins. 


Enter a value in the Left and Right Indent fields. 


These values determine how far a paragraph indents from the left and right 
borders of the text box. A positive value indents the text inside the text 
box, and a negative value places the text outside the text box or column. 


. Enter a value in the First Line Indent field. 


This value determines how far the first line of a paragraph indents from 
the left indent of the paragraph. 


. Select the Hyphenate check box to enable automatic hyphenation for 


the block of text. 


. Press Enter. 


Your changes are applied to the selected block of text. 


Figure 3-9: 
You can 
format a text 
block into 
rows and 
columns. 
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Formatting text in columns and rows 


If you like your text neatly arranged, you can do that in FreeHand. You can 
format a block of text to be displayed in rows and columns, which is the 
equivalent of creating a table. After you format text into columns and rows, 
you can control how the text flows between columns and rows. Follow these 
steps to format a block of text into columns and rows: 


1. 
2. 


Select the block of text you want to format into columns and rows. 
Choose Window~™Object or press Ctrl+F3. 
The Properties panel opens to the Object tab. 


. Click the Columns button (fourth from the top). 


The Columns section of the Object tab opens, as shown in Figure 3-9. 


. Enter a value in the Columns field. 


This determines the number of columns in the text box. 


. Enter a value in the Column Spacing field. 


This value determines the distance between columns. 


. Enter a value in the H field. 


This value determines the height of each table cell. 


. Enter a value in the Rows field. 


This value determines the number of rows in the text box. 


Column height 


Columns 
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8. Enter a value in the Row Spacing field. 


This value determines the amount of space between the rows in the 
text box. 


9. Enter a value in the W field. 
This value determines the width of each cell. 
10. Click the desired Flow button. 


The option you choose determines how the text flows within the table. 
The left button flows text down all rows in a column and then into the 
next column. The right button flows text across all rows and then down 
to the next column. 


If the text isn’t flowing between rows and columns to your liking, you can 
modify text flow by opening the Object tab of the Properties panel and then 
clicking the Adjust Columns button — the bottom button in the list on the 
left. When the Adjust Columns section of the Object tab appears, select the 
Balance Columns check box to balance the flow between columns. 


Scaling text horizontally 

You can adjust the width of characters in a text block to suit your design. 
You can make characters wider or narrower. This option gives you a bit of 
artistic latitude when a font is almost, but not quite, perfect for your needs. 
To scale text horizontally, follow these steps: 


1. Using the Pointer tool from the Tools panel, select the block of text 
you want to scale. 


If you select a block of text with the Pointer tool, the changes are applied 
to all text and subsequent text you enter in the text box. To scale individ- 
ual words in a text block, double-click the text box with the Pointer tool 
and then select the word(s) or character(s) you want to scale. 


2. Choose Window™Object or press Ctrl+F3. 
The Properties panel opens to the Object tab. 
3. Click the Spacing button. 
The Spacing section of the Object tab opens. 
4. In the % field, enter the value by which you want the text scaled. 


This value is a percentage of the text’s original size. Enter a value larger 
than 100 to increase the text width, or lower than 100 to shrink the text. 
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5. In the Spacing % fields, enter values in the Min, Opt, and Max fields 
for Words and Letters: 


e Word: The values you enter for Word affect the space between words 
in a selected block of text. A value of 100 is the standard spacing for 
words. Values less than 100 move words closer together, and values 
higher than 100 move words apart. 


Letter: The values you enter for Letter change the percentage devia- 
tion from the standard spacing between letters. The standard letter 
spacing is 0. Enter a higher value for more space between letters and 
a negative value to move letters closer together. 


To precisely space letters and words, enter the same value in the Min, 
Opt, and Max fields. 


6. In the Keep Together field, enter a value for the number of lines to be 
kept together when scaling text columns. 


Enter a value of 2 to prevent the first or last line of a paragraph being 
isolated at the top or bottom of a column. 


7. Select the Selected Words check box to prevent a line break when 
scaling selected text. 


8. Close the Properties panel or select another text option to modify. 


The selected text is scaled by the values specified. 


Copying attributes between text boxes 

You can quickly copy the attributes in the Text Character, Spacing, and 
Paragraph sections of the Object tab from one block of text to other text 
boxes in your document. To copy attributes from one text box to another, 
follow these steps: 


1. Select the text box whose attributes you want to copy. 
2. Choose Edit™Copy Attributes. 
The attributes are copied to the Clipboard. 
3. Select the text box to which you want to paste the attributes. 
4. Choose Edit™Paste Attributes. 
FreeHand pastes the copied attributes to the selected block of text. 


Adding visual effects to text 


You can create some pretty snazzy text in FreeHand by selecting an exciting 
font and modifying it with the Object tab of the Properties panel. If you need 
more pizzazz than that, you can apply visual effects to text. You can choose 
from effects like the ever-popular drop-shadow or other unique effects, such 
as highlighting text. Figure 3-10 shows the effects that you can choose from. 
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Figure 3-10: 
You can 
achieve 
interesting 
results by 
applying an 
effect to 
text. 
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Follow these steps to add a visual effect to text in a document: 
1. Select the Pointer tool from the Tools panel and double-click a 
text box. 
The text is selected and the Text tool is active. 
2. Select the text to which you want to apply a visual effect. 
You can select an individual letter, a word, or the entire text box. 
3. Choose Window™Object or press Ctrl+F3. 
The text properties appear on the Object tab. 


4. Click the Effects button at the bottom-left of the Object tab and choose 
one of the following: 


e No Effect (the default) 
e Highlight 
e Inline 
e Shadow 
e Strikethrough 
e Underline 
e Zoom 
5. Press Enter or click outside the text box. 


FreeHand applies the effect to the selected text. Be aware that these 
effects will not be retained if the text is converted to paths (see 
“Converting text to a path,” later in this chapter). 
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Adjusting 


the Spacing and Position 


of Characters and Lines 


When you create paragraph text, you have more options than just font type, 
size, and alignment. You can also specify the space between paragraph lines, 
which is known as leading (pronounced “ledding”). Another parameter you 
can modify is kerning, which is the space between two characters. You can 
also modify the baseline shift of a word or letter in a block of text, which 
causes the selected word or letter to be raised above or dropped below the 
baseline of the other characters in the text block. 


Adjusting leading 


To adjust leading for a block of text, follow these steps: 


1. 


Select the Pointer tool from the Tools panel and click a text box to 
select it. 


. Choose Window™Object or press Ctrl+F3. 


The Properties panel opens to the Object tab. 


3. Click the Character button. 


> 


a 


Enter a value in the Leading field. 


Enter a number to specify the leading value. The value is applied accord- 
ing to the option you select in Step 5. 


Choose one of the following options from the Leading Type drop- 
down list: 


e Plus (+): Specifies a point value to be added to the current font size. 
e Equal (=): Specifies leading equal to a value. 


e Percent (%): Specifies leading as a percentage of the current font size. 


. Close the Properties panel to apply your changes or select another 


text parameter to modify. 


The change is applied to the selected text box. 


Adjusting kerning 


To adjust kerning for a block of text, follow these steps: 


1. 


Select the Pointer tool from the Tools panel and click a text box to 
select it. 


Selecting a text box determines the kerning for the entire block of text, 
also known as range kerning. To modify kerning between individual 


S]00] 3X91 XIN 
pueyaal4 ay) Gus 


626 Adjusting the Spacing and Position of Characters and Lines 


words or characters, double-click the block of text and place your 
cursor between the characters or words for which you want to modify 
kerning. 


. Choose Window™Object or press Ctrl+F3. 


The Properties panel opens to the Object tab. 


3. Click the Character button. 


4. Enter a value in the Kerning field and press Enter. 


The value you enter is a percentage of the space taken up by the letter M 
for the text font. To decrease the kerning between words or characters, 
enter a negative value, such as -10, which will decrease the kerning by 
10 percent. 


. Press Enter or choose another text parameter to modify. 


Your specified kerning is applied to the text. 


Adjusting baseline shift 


You can modify baseline shift by following these steps: 


1. 


Select the Pointer tool from the Tools panel and double-click the text 
box that contains the word or character whose baseline shift you want 
to modify. 


Your cursor becomes an I-beam. 


2. Select the word or character whose baseline shift you want to modify. 
3. Choose Window™ Object or press Ctrl+F3. 


The Properties panel opens to the Object tab. 


4. Click the Character button. 


5. In the Baseline Shift field, enter the value by which you want the base- 


line shifted. 


By default, this value is in points. (If you’ve changed to a different unit 
of measurement, for example, pixels, the value will be in pixels.) To 

shift the selected text above the baseline, enter a positive value. To shift 
the selected text below the baseline, enter a negative value. For exam- 
ple, entering a value of -15 shifts the selected text 15 points below the 
baseline. 


. Press Enter or choose another text parameter to modify. 


The text is shifted by the amount specified. 
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Figure 3-11: 


You can 
create 
editable 
vector 
objects 
when you 
convert text 
to paths. 


When you create a line of text, it flows straight from point A to point B. This 
is the time-honored standard for creating text. But wait: You’re an illustrator, 
and FreeHand is an illustration program. You say you want text that swoops 
and swirls like a roller coaster? Or perhaps you want your text characters to 
look a little different. If that’s your artistic vision, we show you how to 
achieve it in the upcoming sections. 


Converting text to a path 


You can convert a block of text, or a single letter, into a path. When you do this, 
the letter or text block is no longer editable as text, but you can have a field 
day distorting the text by manipulating points with the Subselection tool or by 
using the Freeform tool. (We show you how to use the Subselection tool in 
Book VI, Chapter 4.) 


If you’re trying to convert text that already has special effects applied to it, be 
warned. When you convert the text to a path, your special effects disappear. 


Here’s how you convert text to a path: 


1. Select the block of text that you want to convert to a path. 


This technique works best with single letters or initials, for example, the 
letters used to make a client’s logo. This technique also works best if the 
text is large. 


2. Choose Text™Convert to Paths or press Ctrl+Shift+P. 


FreeHand converts the text to a vector object. Characters with counters 
(that is, holes, like in a, b, e, g, o, and so on) become Compound Paths. 
Figure 3-11 shows a letter after being converted to paths. The converted 
letter has been further modified with the Freeform tool. 
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Aligning text to a path 

If you (or your client) have the hankering for an illustration with unique text, 
you can easily achieve this goal by attaching text to a path. You create text 
that swoops and swirls by attaching text to an open path, or you can create 
stylized text by attaching it to a closed path, such as an ellipse. To align text 
to a path: 


1. Select the text and the path. 


You can select both objects by dragging the Pointer tool around the text 
and the path, or by selecting either the text or the path and then select- 
ing the other while holding down the Shift key. 


2. Choose Text™Attach to Path or press Ctrl+Shift+Y. 
The text develops a magnetic attraction for the path. 
After you’ve attached your text to a path, you can move the text along the 


path if it isn’t exactly where you want it. See the “Modifying the alignment of 
text along a path” section, later in this chapter, for details. 


Aligning text to both sides of an ellipse 

Another effect that you can achieve with FreeHand is attaching text to the 
top and bottom of an ellipse. If you have a client that wants to display text 
above and below a logo, this is the path — pun intended — to take. To 
attach text to the top and bottom of an ellipse, follow these steps: 


1. Create an ellipse. 
For more information on creating an ellipse, see Book VI, Chapter 4. 
2. Use the Text tool to create a block of text. 


Create the text that appears above and below the ellipse in the same 
text block. Press Enter after you create the text that appears above the 
ellipse and then type the second line of text. 


3. Select the ellipse and then, while pressing the Shift key, select the 
text. 


4. Choose Text=Attach to Path. 


The text on the first line attaches to the top of the ellipse, and the text 
on the second line attaches to the bottom of the ellipse, as shown in 
Figure 3-12. 


Figure 3-12: 
You can 
attach text 
to both the 
top and 
bottom of an 
ellipse. 
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If you have an object in your illustration and you want a block of text to flow 
around it, select the object and move it so it overlaps the text. Then choose 
Modify>Arrange™Bring to Front to bring the object in front of the text. Then 
choose Text™Flow Around Selection. In the Flow Around Selection dialog 
box that appears, click the Text Wrap button (the button on the right) and 
then, in the text fields, enter the size of the margins you want between the 
text and the object. 


You can flow text inside an object. Create an object, such as an ellipse or 
polygon, and then create a block of text. Select the text and object, and then 
choose Text™Flow Inside Path. Whoosh! The text appears inside the shape. 


Modifying the alignment of text along a path 

After you attach text to a path, you can modify where the text aligns to the 
path. You can modify which side of the path text appears on, as well as move 
the text to a different point along the path. To modify the alignment of text 
along a path, follow these steps: 


1. Using the Pointer tool from the Tools panel, select the text whose 
alignment along a path you need to change. 

2. Choose Window™Object or press Ctrl+F3. 
The Object tab in the Properties panel opens. 


3. Select the Show Path check box if you want the path displayed as well 
as the text. 


4. From the Top and Bottom Alignment drop-down list, select one of the 
following: 


e None: Select this option if the text is attached to a path that is not 
visible. 


e Baseline: Aligns the baseline of the text to the path. 
e Ascent: Aligns the text to the bottom of the path. 
e Descent: Aligns the text to the top of the path. 
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5. From the Orientation drop-down list, select one of the following options: 
e Rotate around path: Orients the text with the rotation of the path. 
e Vertical: Orients the text vertically to the path. 
e Skew Horizontal: Skews the text horizontally along the path. 
e Skew Vertical: Skews the text vertically along the path. 


6. In the Inset section, enter a value in the Left field and then press Enter 
to move the text to a different position along the path. 


This is the distance you want the text offset to the right along the path. 
If the text is attached to an ellipse, enter a negative value to move the 
text to the left. 


When you enter a value in the Left field, the value in the Right field is 
automatically updated. For example, if you enter a value of 10 in the Left 
field, this value is added to the Right field. The value in the Right field is 
where the text ends. If you’re a math whiz, you can enter a value in the 
Right field; however, it’s easier to enter a value in the Left field. 


If you prefer, you can change the text alignment along a path by manually 
moving it. To manually align text along a path, follow these steps: 


1. Use the Pointer tool from the Tools panel to select the block of text 
whose alignment to a path you want to modify. 


The text is selected, and a small triangle appears to the left of the text, 
as shown in Figure 3-13. 





Figure 3-13: 
Move the 
text along 
the path by 
clicking and 
dragging the 
triangle. D 











2. Click the triangle and drag the text to a new location along the path. 


As you drag the triangle, FreeHand creates a gray shape the size of the text 
that gives you a preview of the current location of the text along the path. 


3. Release the mouse button when the text is in the desired location. 


Chapter 4: Creating Illustrations 
with FreeHand MX 


In This Chapter 


Creating shapes 

Selecting objects 

Modifying shapes 

Creating groups 

Arranging and aligning objects 
Slicing objects 


Ur: you create an illustration in FreeHand MX, you have a multitude 
of options to work with. With a bit of practice, you can create some 
interesting shapes for your illustrations and modify them to suit your artis- 
tic muse or your client’s vision. The results you can achieve are limited only 
by your imagination and sense of experimentation. The FreeHand tools, 
although many, are relatively simple to use, which gives you the freedom to 
concentrate on your creation without having to worry about an overly com- 
plicated tool. 


In this chapter, we show you how to create an illustration by using the mar- 
velous array of tools in FreeHand. We explain how to use the available tools 
to create shapes and then use panels or other tools to modify those shapes. 
In Book VI, Chapter 5, we show you how to transform the shapes you create 
to put your own unique touch on an illustration. 


Using Predefined Shapes 


In Book VI, Chapter 2, we introduce the shape tools. The shape tools look 
kind of ho-hum when you see them in the Tools panel, but when you click 
one of them and use it to add a shape to your illustration, things start look- 
ing up. And if you double-click an innocuous little tool button, you may get a 
dialog box with tool options that allow you to modify the base shape into 
something truly cool or modify the way the tool draws. In this section, we 
show you how to use the shape tools to create shapely shapes. We also 
point out which tools have additional options. Figure 4-1 shows the shape 
tools and the shapes you can create with them. 
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Creating rectangles and squares 
If you need a rectangle or its equally dimensioned cousin, the square, in your 
illustration, you use the Rectangle tool. Rectangles make wonderful borders 
for Web site headers and frames for text. If your illustration calls for rectan- 
gles with rounded corners, the Rectangle tool can give you this as well. To 
add a rectangle to your illustration, follow these steps: 

1. Select the Rectangle tool from the Tools panel. (Refer to Figure 4-1). 


If you’re creating a garden-variety rectangle, skip to Step 5. If you want a 
rectangle with pizzazz, read on. 


2. Double-click the Rectangle tool. 
The Rectangle Tool dialog box appears. 
3. To make the corners rounded, enter a value for the corner radius. 


Enter a low value for gently rounded corners or a high value for corners 
with curves that rival those of an Italian sports car. 


4. Click OK. 
The dialog box goes on hiatus until you double-click the tool again. 
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Figure 4-2: 
You can 
create a 
polygon or 
star with the 
Polygon 
tool. 
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5. Click and drag inside the document to draw the rectangle. 


As you drag, FreeHand draws a bounding box to give you a preview of 
the shape’s current size. 


If you hold down the Shift key while dragging, you constrain the shape 
to a square. If you hold down the Alt key, the shape is created from the 
center outward. 


6. Release the mouse button when the shape is the desired size. 


FreeHand creates the rectangle. 


Creating polygons 

You can satisfy your need for many-sided shapes with the Polygon tool, 
which has a polygonal shape emblazoned on it. You can create polygons and 
star-shaped objects with the Polygon tool, specifying how many sides the 
shape has. To create a polygon, follow these steps: 


1. Select the Polygon tool (refer to Figure 4-1) by clicking and holding on 
the Rectangle tool and then selecting Polygon when the pop-up menu 
appears. 


You can create a polygon using the tool’s current settings by clicking 
and dragging inside the document. For other options, you need to open 
the Polygon Tool dialog box. 


2. Double-click the Polygon tool. 


The Polygon Tool dialog box opens, as shown in Figure 4-2. 





Polygon Tool 
| Number of Sides 
(a | es 
Shape: 
© Polygon C Star 








Cancel | 





3. Drag the slider to specify the number of sides. 


Alternatively, you can enter a value higher than 3 in the field. The slider 
stops at 20, but you can manually enter any number in the field. (If you 
create a polygon with lots of sides, it ends up looking like a circle.) 
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4. Select the Polygon or Star radio button. 


This determines whether you draw a polygon or a star. If you select Star, 
you can specify the angle of the sides by following the next step. If you 
select Polygon, you’re done; go to Step 7. 


5. If you selected the Star radio button, select Automatic or Manual in 
the Star Points section. 


If you select Automatic, FreeHand determines the angle based on the 
number of sides you specify. 


6. If you specify Manual, drag the slider to specify the angle of the star 
sides. 


As you drag the slider, the preview window refreshes to show you the 
star’s shape with the current settings. 


7. Click OK. 
The dialog box closes. 
8. Click and drag inside the document to create the shape. 


As you drag, FreeHand creates a preview that shows the current size of 
the shape. Hold down the Shift key while dragging to create a shape that 
is as wide as it is tall. Hold down the Alt key to draw the shape from the 
center out. 


9. Release the mouse button when the shape is the desired size. 


A star is born. That is, unless you choose the Polygon option. 


Creating ellipses 


The ellipse is a wonderful shape, a curved wonder that makes ends meet. If 
your illustration calls for a circular or oval shape, the Ellipse tool is right up 
your alley. And if you’re creating an illustration of a bowling alley, you can 
use the Ellipse tool to create a bowling ball and use the Rectangle tool to 
create an alley. To create a shape with the Ellipse tool: 


1. Select the Ellipse tool by clicking it in the Tools panel. 


It’s the tool with a circle for an icon. (Refer to Figure 4-1.) The Ellipse 
tool has no parameters to modify. 


2. Click the spot in the document where you want to create an ellipse 
and then drag diagonally. 


As you drag the tool, FreeHand creates a preview of the shape’s size. If 
you hold down the Shift key while dragging, you constrain the shape to 
a circle. If you hold down the Alt key, you create the shape from the 
center out. 


Figure 4-3: 
Use this 
dialog box 
to specify 
how your 
soaring 


spiral swirls. 
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3. Release the mouse button when the ellipse is the desired size. 


FreeHand creates the ellipse. 


Creating spirals 

Spirals are fun shapes that you can use to good effect when creating whimsi- 
cal illustrations. You can use a spiral to create a reasonable facsimile of a 
corkscrew, just the thing if your client sells fine — or not so fine — wines. To 
add a spiral to an illustration, follow these steps: 


1. Select the Spiral tool by clicking and holding on the Line tool in the 
Tools panel and then selecting Spiral from the pop-up menu. (It looks 
like a wound-too-tight spring.) 


You can create a spiral using the tool’s current settings by dragging in 
the document. If you want a custom spiral, take the following steps. 


2. Double-click the tool. 
The Spiral dialog box opens, as shown in Figure 4-3. 





Spiral 
Spiral type: ald 
Expansion Mm x 4) Ej 


Draw by: [Rotations z] 


Number of rotations: 
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Draw trom: | Center | 


Direction: O] 6 
Cancel 


| 














3. In the Spiral Type section, select one of the following options: 


e Click the left button to create a spiral with an evenly spaced, concen- 
tric radius. 


e Click the right button to create a spiral with an expanding radius that 
becomes wider with each spiral. When you click the right button, an 
extra option appears. Drag the slider to set the expansion rate. 
Alternatively, you can enter a value in the text field. 


4. From the Draw By drop-down list, select one of the following options 
to specify the manner in which FreeHand draws the spiral: 


e Rotations: Choose this option to specify the number of rotations the 
spiral has, regardless of its size. When you choose this option, set 
the number of rotations by dragging the slider. Alternatively, you can 
enter a value in the text field. 
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e Increments: Choose this option to create more rotations as the 
spiral grows larger. When you choose this option, specify the spacing 
between each interval by dragging the slider or by entering a value in 
the Increment Width text field. To create a shape with expanding spi- 
rals, enter a value in the Start Radius text field. 


5. In the Draw From drop-down list, select one of the following options: 


e Center: Choose this option, and you draw the spiral by clicking the 
center point and then dragging to place the spiral’s ending point. 


e Corner: Choose this option, and you draw the spiral by clicking to 
place one ending point of the spiral and then dragging to set the 
other. 


e Edge: Choose this option, and you draw the spiral by clicking to 
create the end point and then clicking to set the center point. 


. Click a Direction button to determine which way your spiral swirls. 


Click the left button for a counterclockwise spiral, the right button for a 
clockwise spiral. 


. Click OK. 


The Spiral dialog box closes. 


. Click anywhere in the document and then drag to define the size of 


the spiral. 


As you drag, FreeHand creates a preview of the spiral’s current size. 
Hold down the Alt key to draw the spiral from the center, regardless of 
the option you choose in the Spiral dialog box. 


. Release the mouse button when the spiral is the desired size. 


FreeHand draws the spiral. 


Creating Free-form Shapes 


The Pencil tool has three guises: 


+ 


4 
+ 


Pencil tool: Draws a simple line the width of the currently selected 
stroke. 


Variable Stroke Pen tool: Creates an artistic brushlike stroke. 


Calligraphic Pen tool: Creates a stroke that looks like it was created 
with a calligrapher’s pen. 


You can use these tools to create anything from a simple squiggly line to an 
expressive calligraphic stroke. The following sections show how best to uti- 
lize these three tools. 


Creating Free-form Shapes 63 7 


When you use the tools, keep in mind that if you set attributes for the stroke 
and fill while you have the Pointer tool selected, those attributes become the 
default attributes for all the drawing tools. You may find it advantageous to 
set the Stroke and Fill attributes with the Pointer tool selected before you 
begin using the three tools we introduce in this section. You can change the 
default attributes at any time by selecting a nondrawing tool (like the Pointer 
or Subselection tool) and editing them. And, of course, you can set attrib- 
utes different from the defaults as you use each of the tools. 


Using the Pencil tool 


To use the Pencil tool, follow these steps: 


1. Select the Pencil tool from the Tools panel. 


To create a line using the tool’s current settings, click inside the docu- 
ment and drag to create the line. 


2. For more options, double-click the Pencil tool. 


The Pencil Tool dialog box, shown in Figure 4-4, opens. 





Pencil Tool 
Options 


Precision: [5 — zj j +) 


F Draw dotted line 


Cancel | 





. Drag the slider next to the Precision field. 


This setting determines how much FreeHand smoothes the line as you 
draw. Choose a low value to smooth minor variations as you draw, or 
choose a high value to allow minor variations as you draw. Alternatively, 
you can enter a value in the text field. 


. Select the Draw Dotted Line check box. 


This setting is optional. If you select it, FreeHand creates a dotted line 
preview as you draw (note that the actual line you draw will be solid; 
only the preview is dotted). This option speeds redraw and is recom- 
mended if you use FreeHand on a computer with a slower processor. 


. Click OK. 
The Pencil Tool dialog box closes. 
. Click and drag inside the document to create a line. 


As you drag the tool across the document, FreeHand creates a preview 
of the line. If you hold down the Alt and Shift keys while using the tool, 
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you constrain the line to a predefined angle. (To predefine the angle, 
choose File®Document Settings™Constrain and enter a value in the 
dialog box; the default angle is 45 degrees.) 


7. If you choose the Variable Stroke tool or Calligraphic Pen tool by 
clicking and holding the Pencil tool and selecting either tool from the 
pop-up menu, you can vary the stroke by f % of the tool’s Width set- 
ting by doing one of the following as you draw: 


e To decrease the stroke width, press the left-arrow key. 
e To increase the stroke width, press the right-arrow key. 


e If you draw with a pressure-sensitive tablet, vary the pressure you 
apply to the tablet to vary the stroke width. 


8. Release the mouse button when the line is the desired length. 


FreeHand draws the line. At this point, you can add to the line by placing 
the tool over the last or first point. Your cursor becomes a plus sign (+), 
indicating that the path can be extended. 


Using the Variable Stroke Pen tool 


The Variable Stroke Pen tool is a handy tool when you’re looking to make 
swoopy lines that go from being small to large, or vice versa. To use the tool, 
just follow these steps: 


1. Select the Variable Stroke Pen tool from the Tools panel by clicking 
and holding the Pencil tool and selecting the Variable Stroke Pen tool 
from the pop-up menu that appears. 


If you start drawing with it, it makes a line that looks just like the Pencil 
tool. However, for more magic, continue through the following steps. 


2. Double-click the Variable Stroke Pen tool. 
The Variable Stroke Pen dialog box opens. 
3. Set your precision and dotted line options. 


You can change the precision of the line by dragging the slider or by 
entering a number in the Precision field — 1 is the smallest value, and 10 
is the highest. The higher the number, the more points FreeHand adds to 
the lines you create, giving you more precise control over the line. If you 
want the preview of the line as you draw (but not the line itself) to be 
dotted instead of solid, select the Draw Dotted Line check box. 


4. Select the Auto Remove Overlap check box if you want FreeHand to 
create composite paths when line segments overlap, rather than keep- 
ing the lines discrete. 
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5. Set the minimum and maximum width of the stroke. 


You can either use the sliders to change the values in each of the fields 
or manually input the minimum and maximum values. 


6. Click OK to save your settings. 


When you have your settings saved, you can really experience the magic 
of this tool. As you’re drawing, hold down the right- or left-arrow keys to 
dynamically increase or decrease the width of the line. 


Using the Calligraphic Pen tool 

The Calligraphic Pen tool is not likely to be your first tool of choice, but it is 
equally as cool as the Pencil tool and the Variable Stroke Pen tool. Practically 
speaking, the Calligraphic Pen tool is a tool that you should really use only if 
you’re drawing with a pressure-sensitive tablet — but if you can write callig- 
raphy using a mouse or a trackball, more power to you! As you would expect, 
this tool creates angled lines, similar to a calligraphy pen. 


You use the tool like you use the others, by selecting it from the menu that 
pops up when you click and hold the Pencil tool in the Tools panel. Similarly, 
you can double-click the tool to bring up the Calligraphic Pen dialog box. 
There, you can specify the following items: 


+ Precision: The number of points associated with the calligraphic line 
you’re drawing. The higher the number, the more points on the line. 


+ Draw Dotted Line: Select this check box if you want the preview of the 
line you’re drawing to be dotted as you draw instead of solid. Only the 
preview of the line is dotted; the drawn line’s stroke and fill (as set in the 
Object tab of the Properties panel) appear when you release the mouse 
button. 


+ Auto Remove Overlap: Select this check box if you want FreeHand to 
create composite paths when line segments overlap, rather than keeping 
the lines discrete. 


+ Width: Select the Fixed or the Variable radio button to choose a width. If 
you choose Variable, you can enter values for the minimum and maxi- 
mum width for the line. 


+ Angle: Click and hold on the wheel to change the angle of the line. This 
setting makes your line more or less angular, depending on the value 
you choose. Click the small circle in the angle wheel and rotate it to set 
the angle of the stroke. You can mimic the angle of the pen point in this 
manner. 
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Selecting Objects 


are 


When you create a document and add stuff (a technical term for objects) to 
the illustration, you place the stuff where you think it belongs. Thankfully, 
your initial placement isn’t cast in stone. If you need to move, or otherwise 
modify, an object, you have to first select it. If the object you’re modifying is 
a path, you can select individual points along the path. In the upcoming sec- 
tions, we show you how to use the Selection tools to select stuff. 


Using the Pointer tool 


You use the Pointer tool to select an object or several objects in your docu- 
ment. To use the Pointer tool, select it from the Tools panel (it’s at the top 
left of the panel, with the solid black, left-pointing arrow for an icon) and do 
one of the following: 


Click an object to select it. If the object has no fill, click the object’s 
stroke (the borderline that makes up the object). 


+ Click and drag a marquee around several objects to select them. 


+ Click an object, and then while holding down the Shift key, click other 
objects to add them to the selection. 


After selecting an object or group of objects, dots signifying the border of 
each object or group appear. You can now drag the objects to a different 
location or use the Object panel of the Properties panel to change the 
parameters of the object(s). If you select a path, the dots that make up the 
path appear. 


If you are using a tool other than the Pointer tool, you can momentarily 
select the Pointer tool by holding down the Ctrl key. Use the tool to select 
objects and then release the Ctrl key to revert to the previous tool. 


The Pointer, Subselection, and Lasso tools share common settings. The 
Subselection tool is the white-headed arrow to the right of the Pointer tool; 
the Lasso tool is directly beneath the Subselection tool. By default, objects 
or points must be completely encompassed by a marquee in order to be 
selected. You can vary the sensitivity of these tools by doing the following: 


1. Double-click the Pointer tool, Subselection tool, or Lasso tool. 
The tool’s dialog box appears. 
2. Select the Contact Sensitivity option. 


Select this option if you want the ability to select objects that are only 
partially encompassed by a marquee. This option is deselected by 
default. 


ar 
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3. Click OK. 


The new settings are applied to the tool and remain in effect until you 
open the dialog box and choose a different option. 


Using the Subselection tool 


You use the Subselection tool to select individual objects, select individual 
points along a path, or select an object that is nestled within a group. To 
make a selection with the Subselection tool, follow these steps: 


1. Select the Subselection tool from the Tools panel. 


It’s the tool with the icon that looks like a hollow arrow pointing left. You 
find it right next to the Pointer tool at the top of the Tools panel. 


To momentarily select the Subselection tool while using the Pointer tool, 


hold down the Alt key. After using the Subselection tool, release the Alt 
key to revert to the Pointer tool. 


2. To make a selection, do one of the following: 
e Click an object. This selects an object, even when it’s in a group. 
e Click a path to select it. 


e Click an individual point along a path. Note that you must first select 
the path, and then select the point. 


e Select a group of points by dragging a marquee around them. 


3. After creating a selection, you can move it with the Pointer tool. 


To momentarily select the Subselection tool while using a tool other than 
the Pointer tool, hold down the Ctrl+Alt keys. Release the keys to return to 
the previous tool. 


To modify a path between two points, select the path with the Subselection 
tool and then click and drag anywhere between two points. As you drag, 
FreeHand modifies the path between the two points. 


The Subselection tool has a few other nifty tricks up its sleeve: You can use 
it to modify the radii of corners on rectangles and polygons (simply click any 
corner and drag toward the center of the shape), or to create arcs in ellipses 
(simply click the handle and drag toward the center of the ellipse; when you 
release the mouse button, your ellipse becomes a Pac-Man!). 


Using the Lasso tool 

You use the Lasso tool to select objects by drawing a shape around them 
instead of by clicking them. To make a selection with the Lasso tool (the tool 
that looks like a cowboy’s lariat), follow these steps: 


Book VI 
Chapter 4 


XIN puepesl4 


yum suonensniy| 


funesiy 


642 Editing Objects with the Object Tab 


1. Select the Lasso tool by clicking it on the Tools panel. 


2. Click and drag to define a marquee around the object(s) you want to 
select. 


FreeHand creates a dashed bounding box, giving you a preview of the 
selection area. 


3. Release the mouse button when the bounding box surrounds the 
object(s) you want to select. 


The objects are selected. You can now move the objects with the Pointer 
tool or modify them in the Object tab of the Properties panel. 


Editing Objects with the Object Tab 


Figure 4-5: 
Inside the 
Object tab. 


The Object tab in the Properties panel is a multifaceted workhorse you use 
to change a variety of parameters, depending on the object you select. In 
FreeHand MX, you can control the stroke, fill, and effects of an object, all 
from this single interface. When you select an object with the Pointer tool, 
the Object tab of the Properties panel automatically displays the current 
stroke, fill, and effect parameters for that object, as shown in Figure 4-5. If 
the object is a rectangle, ellipse, or polygon, the panel also shows its size 
and position information, all of which can be edited on the Object tab. For 
rectangles and polygons, you also have access to corner properties. 
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To change an object’s position and size, follow these steps: 
1. Using the Pointer tool, select the object whose characteristics you 
want to modify. 
2. Choose Window™Object or press Ctrl+F3. 


The Object tab of the Properties panel opens. If the selected object is a 
rectangle, polygon, or ellipse, the tab displays the object’s dimensions 
and location. If the selected object is an open or closed path, the tab 
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displays the object’s stroke, fill, number of points in the path, odd or 
even fill, whether the path is open or closed, and the flatness of the 
curve. In order to see the position, group the object. 


3. To change the position of the object, enter new values in the X and/or 
Y fields. 

4. To change the object’s dimensions, enter new values in the Width 
and/or Height fields. 


Note that this does not resize the object proportionately unless the ratio 
of the new values you entered in the width and height fields matches the 
ratio of the original values. 


5. Press Enter to apply the changes. ae 
The object is resized and/or repositioned. You can close the Properties 
panel or leave it floating in the workspace. = 
= 
o& 
A number of other powerful options reside within the Object tab of the = g 9 
Properties panel, specifically those that add and edit strokes, fills, and = o S: 
effects. These options are all covered in detail in Book VI, Chapter 5. z É e 
>x< Y 
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Grouping and Ungrouping Objects 


At times, it’s advantageous to create a group of objects. When you select sev- 
eral objects and create a group, the group behaves as a single object. You can 
move the group with the Pointer tool, resize the group with the Object tab of 
the Properties panel, and modify the stroke and fill of every object in the 
group at once by changing the stroke and fill settings in the oft-mentioned 
Object tab. If you need to edit an individual object in a group, select it with 
the Subselection tool and then perform the needed task. 


You can create a group at any time, for example, when you’ve arranged sev- 
eral elements to create an illustration of a face. You can create a group by 
selecting objects from different layers. When you do this, the objects are 
moved to the current drawing layer, yet they retain their stacking order. To 
create a group, follow these steps: 


1. Select the objects you want to group. 


You can select objects with the Pointer tool, Subselection tool, or Lasso 
tool. 


2. Choose Modify™Group. 
Four dots signifying the border of the group appear. 
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After you have created a group, you can select an individual object in the 
group by doing one of the following: 
+ Select the Subselection tool and click the object you want to select. 
+ Select the Pointer tool, hold down the Alt key, and click the object you 
want to select. 


If you have objects underneath other objects in a group, you can select them 
by holding down the Ctrl and Alt keys while right-clicking to cycle through 
the objects in the group. 


To ungroup objects, follow these steps: 


1. Select the object group with the Pointer tool. 
2. Choose Modify™Ungroup. 
The group is disbanded, and you can now edit each object individually. 
After you create a group, you can nest another object or group by selecting 


the object or group, selecting the object or group you want to nest the item 
in, and then choosing Modify™Group. 


Arranging Objects 


When you add objects to an illustration, they are stacked on top of each 
other, and the objects on top of the stack in a layer eclipse the objects 
below. You can change the stacking order of objects at any time by following 
these steps: 


1. Use the Pointer or Subselection tool to select the object whose order 
in the stack you want to rearrange. 


2. Choose Modify™Arrange and choose one of the following commands 
from the submenu: 


e Bring to Front: Moves the selected object to the front of the stack. 


e Move Forward: Moves the selected object ahead of the next object 
in the stack. 


e Move Backward: Moves the selected object behind the next lower 
object in the stack. 


e Send to Back: Moves the selected object to the back of the stack. 


After applying one of the Arrange commands, the object’s order in the 
stacking layer is changed. 
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When you use the Arrange command, you modify the stacking order on the 
drawing layer. If there are layers above or below the drawing layer (the cur- 
rently selected layer), objects on those layers will affect the overall appear- 
ance of your illustration. In order to achieve the desired result, you may 
have to move the object to another layer. For more information on layers, 
see Book VI, Chapter 2. 


You can also modify the stacking order by cutting or copying an object, 
selecting an object in the document, and then choosing Edit~Special™Paste 
in Front or choosing Edit™Special™Paste Behind. Note that this changes the 
stacking order, but not the position of the pasted object. 


ar 
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Aligning Objects with the Align Panel 


When you have several objects in a document, you may need to align them. 
This is a fairly easy process using FreeHand’s object chiropractor: the Align 
panel. You use the Align panel to align objects to each other or to the docu- 
ment. You can also use the Align panel to distribute objects relative to the 
other objects in the selection or relative to the document. When you choose 
one of the distribution options, the objects are spaced equally. You can also 
use the panel to align points along a path. 
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To align objects, follow these steps: 


1. Use the Pointer or Subselection tool to select the objects or points you 
want to align. 


2. Choose Window™ Align. 


The Align and Transform panel, shown in Figure 4-6, appears, open to 
the Align tab. The tab consists of two drop-down lists on the right and a 
preview window on the left. The preview window gives you an abstract 
visual representation of the currently selected options. 


The preview window has nine squares in the center and four mitered 
edges. You can align the objects by double-clicking one of these squares 
or mitered edges. For example, if you double-click the mitered edge at 
the top of the window, objects are aligned to the top; double-click the 
mitered edge on the left side, and objects are aligned to the left. If you 
double-click the square in the top-right corner, objects are aligned to the 
top and right; double-click the square in the center, and objects are 
aligned to the center. The drop-down lists update to match the preview 
window. Likewise, when you select options from the drop-down lists, the 
preview window updates to display an idealized representation of the 
chosen list option. The following steps walk you through selecting the 
options. 
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Figure 4-6: oo 
You use this [5 Temstem 1 
panel to 
bring your 
objects into 
alignment. 








3. Select the Align to Page check box to align or distribute objects rela- 
tive to the page. 


This aligns selected objects relative to the page. For example, objects 
can be aligned to the top-right corner of the page. If this option is not 
selected, objects are aligned or distributed relative to their current posi- 
tions in the document. For example, if you have selected several objects 
in the document, and you double-click the left edge with the Align to 
Page option selected, the objects are aligned to the left border of the 
document. Without this option selected, all the objects are aligned to 
the left of the selected objects. 


4. To align the selected objects, do one of the following: 
e Click one of the squares or edges in the Alignment window. 


e Select one of the following options from the Horizontal drop-down 
list: No Change, Align Top, Align Center, or Align Bottom. 


e Select one of the following options from the Vertical drop-down list: 
No Change, Align Left, Align Center, or Align Right. 


5. To distribute the selected objects, do the following: 


e Select one of the following options from the Horizontal drop-down list: 
No Change, Distribute Tops, Distribute Centers, Distribute Bottoms, or 
Distribute Heights. For example, if you select the Distribute Tops 
option, the objects are equally spaced according to the top of each 
object. 


e Select one of the following options from the Vertical drop-down list: 
No Change, Distribute Lefts, Distribute Centers, Distribute Rights, or 
Distributes Widths. For example, if you select the Distribute Lefts 
option, selected objects are distributed (spaced) according to the 
left side of each object. 


6. Click the Apply button. 


The objects are aligned or distributed according to the options you 
select. If the alignment or distribution isn’t as you’d expect — this may 
happen the first few times you use the panel — choose EditUndo (or 
press Ctrl+Z) and then perform the alignment or distribution again. 
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Slicing Objects with the Knife Tool 


Figure 4-7: 
The slice 
and dice 
settings for 
the Knife 
tool. 


You can use the Knife tool to create two paths from a closed path, such as a 
circle or rectangle, or you can use the tool to slice an open path in two. For 
example, you can use the Knife tool on a circle or oval to create a curved 
path that otherwise would be difficult to create. 


After you slice an object or path one time, you are left with two editable paths. 
If you use the Knife tool to take several swipes at the shape, you're left with a 
lot of editable paths. You can vary the Knife tool settings to vary the width of 
the slice and whether the tool makes a straight slice or freehand slice. 


To use the Knife tool, follow these steps: 


1. Use the Pointer tool to select the object or path you want to slice. 
2. Select the Knife tool from the Tools panel. 

You can use the tool with the previous settings or change the settings. 
3. Double-click the Knife tool to change the settings. 

The Knife Tool dialog box, shown in Figure 4-7, appears. 


Knife Tool 

f 

Tool Operation 
(© Freehand C Straight 
With 

{0 «| | >| 
Options 

F Cose cut paths 
Tight ft 


Cancel | 








4. Select one of the following Tool Operation options: 


e Freehand: Select this default option to make a freehand cut. If you 
hold down the Alt and Shift keys while using the tool, you constrain 
the line to a predefined angle (to predefine the angle, choose 
File>Document Settings™Constrain and enter a value in the dialog 
box; the default angle is 45 degrees). 


Straight: Select this option to make a straight cut. Hold down the 
Shift key to constrain the tool to horizontal when dragging left to 
right, vertical when dragging up or down, or 45 degrees from the hor- 
izontal when dragging diagonally. 
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5. Drag the Width slider to determine the tool’s effective cutting area. 


A value of 0 creates a thin cut, while higher values create two cuts sepa- 
rated by the width you choose. Alternatively, you can enter a value in 
the Width text field. 


6. Select one of the following check boxes, as needed: 


e Close Cut Paths: Select this check box, and FreeHand closes the 
paths you create with the tool and displays the stroke and fill of the 
original path. 


e Tight Fit: Select this check box, and the tool closely follows the path 
you draw with your mouse or tablet. 


7. Click OK. 
The Knife Tool dialog box closes. 
8. Click and drag across the object. 
As you drag, FreeHand displays the tool’s path. 
9. Release the mouse button to complete the operation. 
FreeHand slices the shape into paths. 
After you use the Knife tool, you have two (or more) paths. To select an indi- 
vidual path, select the Pointer tool and click anywhere outside of the docu- 
ment to deselect any selected paths. You can then click a path to select it 


and then move it to a different location or modify it by using the Object tab 
of the Properties panel. 


Chapter 5: Transforming Text, 
Shapes, and Images with 
Freehand MX 


In This Chapter 


Importing bitmaps 

Scaling objects 

Modifying an object’s shape and position 
Tracing images 

Combining shapes 

Using Xtra tools 


[es to the diversity of the software toolset and menu commands, 
FreeHand allows you to put your own stamp of creativity on your 
designs by creating preset shapes and modifying the shapes to suit your 
creative muse (and your client). In addition to modifying shapes, you can 
combine two or more shapes to create something truly unique. 


In this chapter, we show you how to modify shapes with tools and menu 
commands. We also show you how to create new shapes by blending one 
shape into another, by using the Combine menu commands to combine 
shapes, by cutting one shape from another, and more. 


Working with Bitmap Images 


Vector objects are FreeHand’s claim to fame; however, sometimes you have 
to add a photo or other bitmap image to an illustration. If you use FreeHand 
to create brochures, flyers, or package designs, you probably need to incor- 
porate bitmaps into your work. 


You can import images that have been saved in the following formats: TIFF, 
EPS, GIF, JPEG, PICT (Mac only), PNG, Targa, and BMP (PC only). After you 
have a bitmap image in an illustration, you can modify the bitmap by using 
certain menu commands and the Xtra tools. For example, you can scale, 
skew, flip, or rotate the bitmap. You can also use the drawing tools to aug- 
ment a bitmap image. For example, you can use the Rectangle tool to create 
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a snazzy border for a bitmap. You can also use the Text tool to plop some 
text on top of the bitmap. To import a bitmap, follow these steps: 


1. Choose File™Import. 

The Import Document dialog box appears. 
2. Navigate to the folder that contains the bitmap you want to import. 
3. Select the bitmap file and click Open. 


Your cursor becomes a right angle. This signifies the upper-left corner of 
the bitmap image you are importing. 


4. Click the spot in the document where you want the bitmap to appear. 


The bitmap is placed in the document, and the Pointer tool becomes 
active. You can now move, scale, skew, flip, or rotate the bitmap. 


To create a snazzy border or frame for the bitmap, select the Rectangle tool 
from the Tools panel and create a rectangle slightly bigger than the bitmap. 
Choose Modify™Arrange™Send Backward to move the rectangle behind the 
bitmap. You may wish to center the rectangle and bitmap by choosing 
ModifyAlign™Center Horizontal and ModifyAlign™Center Vertical. You 
can then use one of the Xtra tools or operations to modify the rectangle 
(Emboss works well) and then group the bitmap and rectangle. We show you 
how to use the Xtra tools in the upcoming section, “Using the Xtra Tools to 
Change a Shape.” 


Modifying Objects 


You have a great deal of latitude in how you can modify an object after you 
create it. You can scale, skew, flip, or rotate an object by using menu com- 
mands or tools. In the upcoming sections, we show you how to accomplish 
these object makeovers without breaking a sweat. The tools you can use to 
modify objects all live in the FreeHand Tools panel, though some less-used 
tools are hidden behind the more popular ones. Figure 5-1 shows the tools 
you commonly use to modify objects. 


FreeHand boasts menu commands to scale, resize, and move objects. The cool 
thing about these commands is that when you invoke one, the others all pop 
up in the Transform tab of the Align and Transform panel. Talk about conven- 
ience. In the upcoming sections, we show you how to use each command. 


Scaling graphics 
You can reduce or increase the size of an object in your illustration by scal- 
ing it, either manually or via a menu command. 





Figure 5-1: 
You use 
these tools 
to give 
objects a 
makeover. 
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Scaling graphics manually 
You can scale an object manually either from one of its corners or from its 
center. To scale the object from one of its corners, follow these simple steps: 
1. Select the Pointer or Subselection tool from the Tools panel. 
2. Click any corner and drag left, right, up, or down. 


Dragging away from the object increases the size of the object; dragging 
into the object makes it smaller. Hold down the Shift key while you drag 
to change the size proportionately. As you drag, FreeHand displays the 
outline of the shape’s current size. 


3. Release the mouse button when the shape is the desired size. 


FreeHand resizes the object. 
To scale an object from its center, just follow these steps: 


1. Select the Scale tool from the Tools panel. 


The Scale tool is the one that has a black arrow inside a blue square. 
When you place the cursor over the page, it becomes a small circle with 
four long and four short lines radiating out. 
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Figure 5-2: 


Scale and 
make 
copies in 
one fell 
swoop. 


Modifying Objects 


2. Click inside the object and drag left, right, up, or down. 


Dragging left makes the object narrower; dragging right makes it wider. 
Dragging up makes the object taller; dragging down makes it shorter. To 
scale the object proportionately, hold down the Shift key as you drag left 
or down to make the object smaller or as you drag right or up to make it 


larger. As you drag the tool, FreeHand displays the outline of the shape’s 
current size. 


3. Release the mouse button when the shape is the desired size. 


FreeHand resizes the object. 


Using the Scale command 


To resize an object with mathematical precision, you can use the Scale com- 
mand. If that’s the route you want to take, follow these steps: 


1. Use the Pointer or Subselection tool to select the object you want to 
scale. 


2. Choose Modify™Transform™Scale or double-click the Scale tool in the 
Tools panel. 


The Transform tab of the Align and Transform panel opens to the Scale 
section, as shown in Figure 5-2. 
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3. Enter a value in the Scale field. 


This value is the percentage of the object’s original size. Enter a value 
larger than 100 to increase the object’s size; enter a value lower than 100 
to decrease the size. 


4. Select one or more of the following check boxes: 


e Contents: Scales the contents of a clipping path with the rest of the 
path. 


e Fills: Scales the object’s fill as you scale the object. 


e Strokes: Scales the object’s stroke as you scale the object. 


<e 
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5. Select the Uniform check box to scale the object proportionately. 


This is the default scaling option. If you deselect this check box, the H 
and V fields appear. To scale the object vertically, enter a value in the V 
field; to scale the object horizontally, enter a value in the H field, or 
enter the desired values in both fields to scale both dimensions. 


6. In the Center section, enter values in the X and/or Y fields. 
Changing the value in either field moves the object’s center of rotation. 


7. Enter a value in the Copies field if you want to create copies of the 
object as you scale it. 


When you enter a value in this field, FreeHand leaves the original object 
unaltered and creates the number of copies you specify. Each copy will 
be incrementally larger or smaller, creating copies that are sized incre- 
mentally along a path between the original object and the last copy. 


8. Click the Scale button. 


FreeHand scales the object, and if you enter a value in the Copies field, it 
blends the copies with the original. 


If you like really radical transformations, select an object and then select the 
Freeform tool (it’s next to the Scale tool in the Tools panel, and its icon looks 
like a backward “S” with a black arrow pointing to a red dot on the line). 
Move your cursor toward the object, and then click and drag to modify the 
shape. FreeHand morphs the shape like it was made of virtual Silly Putty. You 
can get more pronounced results by clicking and dragging a point to warp 
the shape. 


Skewing and distorting objects 


In this section, we show you how to skew. If you want to make an image of a 
car look like it is accelerating or rapidly coming to a halt, you could skew the 
image to the left or right. 


Skewing an object manually 
To skew an object manually, follow these steps: 


1. Use the Pointer or Subselection tool to select the object you want to 
skew. 


2. Click and hold the Scale tool in the Tools panel and select the Skew 
tool from the pop-up menu (refer to Figure 5-1). 


You can skew an object vertically or horizontally, relative to a side of the 
object or relative to the center of the object. 
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3. To skew the object, do one of the following: 


e Click above or below the object and drag left or right to skew the 
object horizontally, or drag left or right and up or down to skew the 
object vertically and horizontally relative to the side from which you 
are skewing. 


e Click to the right or left of the object and drag up or down to skew 
the object vertically, or drag up or down and left or right to skew the 
object vertically and horizontally relative to the side from which you 
are skewing. 


e Click inside the object and drag left or right to skew horizontally, or 
drag up or down to skew vertically, or drag up or down and drag left 
or right to skew horizontally and vertically relative to the center of 
the object. 


As you skew the object, FreeHand creates an outline of the shape’s cur- 
rent configuration. For best results, hold down the Shift key while you 
drag to constrain the skewing to a predefined angle (to predefine the 
angle, choose File™Document Settings™Constrain and enter a value in 
the dialog box; the default angle is 45 degrees). 


4. Release the mouse button when the shape has been skewed to 
perfection. 


FreeHand skews the shape. 


Using the Skew command 

If you or your client has a skewed outlook on an illustration, you can easily 
get this point across to your viewing audience by skewing one or more 
objects with the Skew command. You use the command to skew an object 
horizontally or vertically with numerical precision. To use the Skew com- 
mand, follow these steps: 


1. Use the Pointer or Subselection tool to select the object you want to 
skew. 


2. Choose ModifyTransform™Skew or double-click the Skew tool (if the 
Skew tool isn’t visible, click and hold the Scale tool in the Tools panel 
and select the Skew tool from the pop-up menu). 


The Align and Transform panel opens, conveniently bookmarked at the 
Skew section of the Transform tab, as shown in Figure 5-3. 


3. Select one or both of the following check boxes, as desired: 


e Contents: Select this check box to skew the contents of a clipping 
path along with the rest of the path. 


e Fills: Select this check box to skew a tiled fill along with the rest of 
the object. 





Figure 5-3: 
The skew's 
the limit 
with this 
command. 
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4. In the Center section, enter values in the X and/or Y fields. 


If you enter a different value in either of these fields, the object’s center 
of rotation changes. FreeHand uses this center when skewing the object. 


. Enter a value in the Copies field. 


If you enter a value, FreeHand creates the number of copies specified. 
The original object is left unchanged, and each copy is skewed from the 
previous copy by the specified amount; the last copy is skewed to a 
value that is the product of the number of copies and the skew value 
you specify. 


. Click the Skew button. 


The object gets skewed. 


Rotating objects 

You can rotate an object or group with the Rotate tool. And if you like to 
rotate your objects with a degree of precision (pun intended; a circle, after 
all, is 360 degrees), you can use a menu command to do that. 


Rotating objects manually 


If you prefer menu commands, fast-forward to the “Using the Rotate com- 
mand” section. If you prefer free-form rotation, follow these steps: 


1. 


Use the Pointer or Subselection tool to select the object you want to 
rotate. 


. Click and hold the Scale tool in the Tools panel and select the Rotate 


tool from the pop-up menu (refer to Figure 5-1). 


You can use the tool to rotate an object, using a corner or the center as 
the point of reference. 


. To rotate the object, do one of the following: 


e Click any corner and drag to rotate the object relative to the corner 
point clicked. If you click beyond the corner boundary of the object, 
FreeHand uses the spot you click as the center of rotation. 


XIN pueysaly yim 
safew] pue ‘sadeys 
4x9) Gurwuoysuedy 


656 Modifying Objects 


e Click the center of the object and drag to rotate the object relative to 
its center. 


As you drag the tool, FreeHand creates an outline of the object’s current 
position and a diagonal line to show you the angle of rotation. The center 
point of all rotation with the Rotation tool is where the mouse is clicked 
on the page. The farther you drag the mouse out after clicking its point of 
rotation, the higher the degree of accuracy you have. 


4. Release the mouse button when you have rotated the object to the 
desired position. 


FreeHand redraws the object in its new orientation. 


Using the Rotate command 


When you need to put a different spin on an object, you can use the Rotate 
command. You specify the number of degrees the object rotates, and you 
can even spin some copies of the original object. Follow these steps to use 
the Rotate command: 


1. Use the Pointer or Subselection tool to select the object you want to 
rotate. 


2. Choose Modify™Transform™Rotate or double-click the Rotate tool. 


The Align and Transform panel appears, with the Rotate section of the 
Transform tab selected, as shown in Figure 5-4. 
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3. Enter a value in the Rotation Angle field. 


This is the number of degrees you want the object to rotate. Enter a neg- 
ative value to rotate the object in a clockwise direction. 


4. Select one of the following check boxes: 


e Contents: Select this check box to rotate the contents of a clipping 
path with the rest of the path. 


e Fills: Select this check box to rotate a tiled fill with the rest of the 
object. 
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5. In the Center section, enter values in the X and/or Y fields. 


If you enter a different value in either of these fields, the object’s center 
of rotation changes(FreeHand spins an object around the center of 
rotation). 


6. Enter a value in the Copies field as desired. 


If you enter a value, the original object is not rotated and FreeHand cre- 
ates the number of copies you specify, rotating each copy by the amount 
specified. The last copy is rotated to an angle that is determined by the 
number of copies and the degree of rotation. For example, if you create 
three copies with a rotation of 15 degrees, the last object is rotated 45 
degrees. 


7. Click the Rotate button. 


FreeHand spins the object. 


Flipping objects 

We’re sure you've seen those cute pictures of identical twins standing next 
to each other. They look like bookends. If you want the bookend effect in a 
FreeHand illustration, you can flip a copy of an object. Or you can flip an 
object to point it in the opposite direction. In this section, we give you 
instructions that’ll make you flip. 


Reflecting objects manually 

You can flip an object with the Reflect tool. When you flip an object this way, 
you create a mirror reflection of the object. If you need to flip an object to 
keep your illustration from being a flop, follow these steps: 


1. Use the Pointer or Subselection tool to select the object you want to 
flip. 

2. Click and hold the Scale tool in the Tools panel and select the Reflect 
tool from the pop-up menu (refer to Figure 5-1). 


3. Click the document to specify the centerline FreeHand uses to flip the 
object. 


If you hold the mouse button, FreeHand creates a vertical line to show 
you the centerline and an outline of the shape’s position, which also 
allows you to rotate the reflected object (see the next step). 


4. If desired, drag up or down to rotate the reflected object from the 
centerline. 


As you drag, FreeHand moves the outline to give you a preview of the 
reflected object’s current position. 
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5. Release the mouse button. 


FreeHand flips the object and places it on the other side of the spot 
you clicked, at a distance equal to the object’s former position from 
the centerline. 


Using the Reflect command 

You can flip an object vertically or horizontally with the Reflect command. 
And if your design calls for it, you can use the command to create a mirror 
image alongside of or below the original. To use the Reflect command, do 
the following: 


1. Use the Pointer or Subselection tool to select the object you want to 
reflect. 


2. Choose Modify™Transform™Reflect or double-click the Reflect tool. 


The Align and Transform panel appears, as shown in Figure 5-5. 


Figure 5-5: 
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3. In the Reflect Axis field, enter a value between 0 and 90 to reflect the 
object horizontally; enter a value between 90 and 180 to reflect the 
object vertically. 


4. Select one or both of the following check boxes: 


e Contents: Select this check box to reflect the contents of a clipping 
path along with the path. 


e Fills: Select this check box to reflect a tiled fill with the rest of the 
object. 


5. Enter a value of 1 in the Copies field, as desired. 


By default, this field has a value of 0. Entering a value of 1 creates a 
mirror image of the original along with the original for a bookend effect. 


6. Enter values in the X and Y fields to determine the center axis along 
which the object is reflected. 


Unless you’re a math whiz, it’s easier to double-click the object and then 
drag the center handle (it looks like a gear) to the desired position. 
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7. Click the Reflect button. 


The Align and Transform panel says, “Om,” and the object is reflected. 


If you like transforming objects with menu commands, you can save yourself 
some time by keeping the Align and Transform panel in your workspace. To 
open the Align and Transform panel, choose Window™Panels™Transform or 
press Ctrl+M. After the panel is open, click the appropriate button to move, 
rotate, scale, skew, or reflect a selected object. After you complete the trans- 
formation, grab the panel’s handle (the five dots to the left of the panel 
name) and drag to the right. A thick black line appears, indicating where you 
can “dock” the panel. Release the mouse button when the black line shows 
up where you'd like the panel to sit. 


«e 


«P 
If the Align and Transform panel isn’t docked, you can also open it by 
double-clicking any of the transformation tools (the ones grouped with the 
Scale tool in the Tools panel). 


Using the Move command 


You can move objects anywhere in your document with the Pointer tool. 
However, when precision is needed, only a good menu command will do — 
in this case, the Move command. If you need any object in your document to 
get a move on with precision, follow these steps: 


1. Use the Pointer or Subselection tool to select the object you want to 
move. 


2. Choose Modify™Transform™Move. 


The Align and Transform panel appears with the Move section selected, 
as shown in Figure 5-6. 


Figure 5-6: 
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3. Enter a value in the X field and/or Y field. 


This is the distance in pixels (or the unit of measure you specify for the 
document) that you want the object to move along each axis. 
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4. Select one or both of the following check boxes: 


e Contents: Select this check box to move the contents of a clipping 
path with the rest of the path. 


e Fills: Select this check box to move a tiled fill with the rest of the 
object. 


5. Enter a value in the Copies field as desired. 


If you enter a value in this field, FreeHand does not move the original 
object. Instead, it creates copies equally spaced along a path between 
the original object’s position and the position that results by applying 
the values entered in each field. 


6. Click the Move button. 


FreeHand moves the object and makes the number of copies you specify. 


You can also nudge a selected object by pressing one of the arrow keys 
on your keyboard. Hold down the Shift key while moving the object to 
increase the nudge distance by a factor of ten. To customize the nudge 
distance, choose File*’Document™Settings™Cursor Distance. The Cursor 
Distance dialog box appears. Enter a value in the Shift+Arrow Key text 
field and click OK. 


Giving an object some perspective 

The Perspective tool allows you to take an object — such as a circle, rectan- 
gle, polygon, or text — and align it to a perspective grid to make the object 
look like it has dimension. Now, you may be wondering how that’s any differ- 
ent than the Skew tool. The Skew tool creates a rhombus outline, making a 
parallelogram out of the object: The top and bottom edges will be parallel 
to each other, and the sides will be parallel to each other. In contrast, the 
Perspective tool makes all sides vanish to a set of vanishing points. The top 
and bottom converge (or diverge if you’re looking at it that way), and the 
sides are either constrained vertically, or converge upwards (or downwards, 
depending on what you’re doing). 


To give an object perspective, just follow these steps: 


1. Create an object on the canvas or select an already created object. 


As noted previously, the object can be a polygon, circle, rectangle, text, 
or an open or closed path. 


2. Show the Perspective grid by choosing View™Perspective Grid~Show. 


This brings up the default Perspective grid for the page, as shown in 
Figure 5-7. You can modify the Perspective grid by choosing View 


Figure 5-7: 


Now that's 
some 


perspective! 
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Perspective Grid™Define and changing the number of vanishing points 
(that’s what creates the distance depth), the size of the grid squares, 
and the colors used for the grid. 


. Select the Perspective tool from the Tools panel (the Perspective 


tool looks like a blue parallelogram with a light green fill and some 
light blue parallel lines in front) and click the object you want to 
give perspective. 


. Move the object to where you'd like it on the grid, and while keeping 


the mouse button held down, use the arrow keys to place the object in 
the proper perspective grid. 


When you use the arrow keys, a wireframe of your object appears and 
moves from grid cell to grid cell as you press the arrow keys. This takes 
a little getting used to, and depending upon which arrow key you press, 
the object may move around a lot on the grid. But after you play with it 
for a bit, you’ll get the hang of it. 


. Release the mouse button to create the perspective for your object. 


FreeHand puts the object in perspective. 
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Extruding an object 

If you have designs on becoming a 3D graphical artist, then there’s no 

better place to get started than FreeHand. In addition to being able to create 
2D objects and giving them depth perception, now you can actually take a 2D 
object and turn it into a 3D object by using the Extrude tool. 


To use the Extrude tool to transform a 2D object into a 3D object, just follow 
these steps: 


1. Select the Extrude tool from the Tools panel — the tool that looks like 
a 3D elongated cube, found to the right of the Perspective tool. 


2. Click and drag the tool on the object to apply the extrusion effect. 
3. Release the mouse button to apply the effect. 


While the Perspective and Extrude tools are cool to watch in action, they gen- 
erally require more processing power than the other, basic tools. If you’re 
using FreeHand on an older machine, you could find yourself waiting around, 
staring at your screen as you turn that 2D polygon into a 3D polygon. 


Scaling, skewing, and rotating with the Pointer tool 


When you first glance at the Pointer tool, you might think all it can do is 
select objects. But this tool has the strength of three tools — the Rotate tool, 
the Scale tool, and the Skew tool — when you use it in combination with 
Transformation Handles (the boxes that appear along the perimeter of an 
object when you select it). You can use the tool to scale, skew, and rotate in 
a constrained or free-form manner. To transform an object with the Pointer 
tool, follow these steps: 


1. Select the Pointer tool from the Tools panel. 
2. Double-click the object you want to transform. 


When you double-click the object, a bounding box with eight 
Transformation Handles along the perimeter appears. A circular handle 
in the center that looks like a gear also appears, as shown in Figure 5-8. 


3. After double-clicking the object, you can do any of the following to 
transform the object’s shape: 


e To change the object’s height: Move your cursor toward the handle 
on the center top or bottom of the object. When your cursor 
becomes a two-headed vertical arrow, click and drag up or down. 


¢ To change the object’s width: Move your cursor toward the handle 
on the middle right or left of the object. When your cursor becomes 
a two-headed horizontal arrow, click and then drag right or left. 
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Figure 5-8: 
Free-form 
an object 
with the 
Pointer tool. 
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To scale the object: Move your cursor toward any corner point. 
When your cursor becomes a dual-headed diagonal arrow, click and 
drag toward the object or away from it. Hold down the Shift key 
while dragging to scale the object proportionately. 


When scaling an object proportionately with the Pointer tool, be sure 
to release the mouse button before releasing the Shift key; otherwise, 
the object may not scale proportionately. 


To move the object’s center of rotation: Click the handle that looks 
like a gear and drag it to a different location. You can drag the handle 
anywhere in the document. 


To rotate an object: Move your cursor beyond the object’s bounding 
box. When your cursor becomes a curved two-headed arrow, click 
and drag to rotate the object. FreeHand rotates the object relative to 
its center of rotation, the little gearlike handle that you can move 
anywhere to change the center of rotation. 


To skew the object horizontally: Move your cursor between the 
center and one of the corner points on the object’s top or bottom. 
When your cursor becomes two horizontal lines with arrows going in 
opposite directions, click and drag left or right. If you move your 
cursor diagonally, the object will rotate and skew at the same time. 


To skew the object vertically: Move your cursor between the center 
and one of the corner points on the left or right side of the object. 
When your cursor becomes two vertical lines with arrows going in 
opposite directions, click and drag your cursor up or down. If you 
move your cursor diagonally, the object rotates around its center 
point and skews at the same time. You can hold down the Shift key 
while you drag to prevent the object from rotating while it skews. 


Transformation handles 























Center of rotation handle 


4. Release the mouse button when the object is transformed to the 
desired shape. 


The object is transformed. 
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5. You can now drag other handles to further change the object or 
double-click anywhere beyond the object’s bounding box. 


If you press the Tab key or double-click beyond the bounding box, the 
super Pointer tool swoops into a phone booth and resumes its former 
guise as the mild-mannered Pointer tool. The object is still selected. 


Using the Trace Tool 





Figure 5-9: 
You can 
specify the 
degree of 
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with which 
the Trace 
tool traces. 


You use the Trace tool to trace all or part of a bitmap image or any other 
FreeHand object. When you use the Trace tool, you transform the pixels in 
the bitmap into vector paths and shapes. The default settings for the Trace 
tool are optimized to produce good results without taxing your system. 
However, you can modify the settings if your computer has a powerful 
processor and lots of memory. Follow these steps to use the Trace tool: 


1. Double-click the Trace tool. (It’s near the Perspective tool in the Tools 
panel and resembles the Magic Wand tool you find in Fireworks.) 


The Trace Tool dialog box opens, as shown in Figure 5-9. 
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2. From the first Color Mode drop-down list, select an option. 


You can use as few as 2 colors to trace a bitmap, or as many as 256. 
Choosing a higher value creates more vector objects, and your com- 
puter takes longer to perform the operation. 
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. Select Colors or Grays from the next Color Mode drop-down list. 
If you select Grays, the traced image will be grayscale. 


. If you’re tracing a color image, select the RGB color model or CMYK 
color model from the third Color Mode drop-down list. 


Select the RGB color model if your illustration will be displayed on a 
monitor; select CMYK if your illustration will be printed. 


. From the Resolution drop-down list, select High, Normal, or Low. 


Selecting Normal or High results in a more faithful rendition of the origi- 
nal bitmap; however, this produces more vector objects and takes 
longer for your computer and printer to process. 


. Select one of the following options from the Trace Layers drop-down 
list: 


e All: FreeHand traces all layers. 
e Foreground: FreeHand traces only the foreground layer. 
e Background: FreeHand traces only the background layer. 


. From the Path Conversion drop-down list, select one of the following 
options: 


e Outline: Select this option, and FreeHand traces the outline of blocks 
of color in the bitmap and creates closed, filled paths. If you select 
this option, the Path Overlap field opens. Select None for tracing text 
objects and line art, select the Loose option to trace an image made 
up of large areas of single colors, or select the Tight option for best 
results when tracing images like JPEGs with millions of colors. 


e Centerline: Select this option, and FreeHand traces the center of 
strokes. Use this option when you are tracing a vector illustration 
with lots of line work and few fills. If you select this option, the 
Uniform Lines option is selected by default. Deselect the Uniform 
Lines option to create paths with varying stroke widths. 


e Centerline/Outline: Select this option to trace an object with the end 
result being vector objects with both strokes and fills. Contiguous 
areas of color will be outlined with a stroke. If you select this option, 
enter an Open Path Below value between 2 and 10 pixels. When trac- 
ing, FreeHand leaves any paths below this number of pixels as open 
vector objects. 


8. Drag the slider to specify a value for Trace Conformity. 


You can specify a value between 0 and 10. Select a low value for a loose 
rendering of the original bitmap or a higher value for a more precise ren- 
dering of the image with more points. 
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9. 


10. 


11. 


12. 


13. 


Drag the slider to specify a value for Noise Tolerance. 


This setting determines how FreeHand deals with muddy areas of color, 
scan lines, or other noise in a low-quality image. You can specify a value 
between 0 and 10. Choose a higher value to remove more noise from the 
original. 


Drag the slider to set a value for Wand Color Tolerance. 


This value determines how FreeHand treats neighboring areas of color. If 
you choose a low value, FreeHand blends colors of similar hues; if you 
choose a high value, FreeHand creates more colors when tracing. 


Click OK. 
The Trace Tool dialog box closes. 


Click one corner of the area you want to trace and drag the tool to 
define the area you want traced. 


As you drag the tool, FreeHand creates a dotted marquee showing you 
the current selection area. Hold down the Shift key to constrain the 
selection to a square area. 


Release the mouse button when you have selected the desired area. 


FreeHand traces the object. 


Creating New Shapes by Combining Shapes 


Did you ever wish you could combine a rectangle with a triangle and an oval 
to create a free-form sculpture? With FreeHand, you can combine shapes to 
create something new by choosing a menu command. To combine two or 
more shapes into a new shape, follow these steps: 


1. 


2. 


Use the Pointer tool to select the shapes you want to combine. 


Hold down the Shift key and click to select multiple shapes. You can 
select as many shapes as you need. The shapes must overlap unless 
you’re using the Blend command. 


Choose Modify~Combine and choose one of the following commands 
from the submenu: 


e Blend: Creates a blend between the selected shapes. When you 
choose this command, FreeHand creates new shapes between the 
original shapes. By default, FreeHand places 25 steps in the blend, 
but you can change the number of steps in the Object tab of the 
Properties panel. 


Figure 5-10: 
If you 

want neat 
shapes, 
choose a 
command 
from the 
Combine 
submenu. 
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e Union: Joins the selected objects into a single object. If you choose 
this command with filled objects, the new object inherits the fill of 
the object that was highest in the stack. 


e Divide: Creates new shapes where the shapes intersect. 


e Intersect: Creates a new shape that encompasses the area where the 
original shapes overlap. 


e Punch: Cuts the object highest in the stack out of the objects 
underneath. 


e Crop: Creates new paths by cropping to the area where the paths 
overlap. 


After you choose one of the Combine commands, FreeHand creates new 
shapes. Figure 5-10 shows the different shapes you can create with the 
commands. 
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Using the Xtra Tools to Change a Shape 


You use the Xtra tools to create interesting shapes and modify existing ones. 
Instead of using a whole lot of pages to write about each tool, in the next sec- 
tions, we show you how to use some of the more popular Xtra tools. We 
leave it to you to explore the others at your own leisure. To use an Xtra tool, 
choose Window™Toolbars™Xtra Tools, and the toolbar shown in Figure 5-11 
appears. 
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Figure 5-11: 


A toolbar 
loaded with 
Xtras. 
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Using the Arc tool 


You use the Arc Xtra tool to create . . . you guessed it: arcs. To use the Arc 
tool, follow these steps: 
1. Double-click the Arc tool on the Xtra Tools toolbar, shown in Figure 5-11. 
The Arc Tool dialog box opens. 


2. Select one of the following options: Create Open Arc, Create Flipped 
Arc, or Create Concave Arc. 


When you select an option, a window in the dialog box gives you a pre- 
view of the arc the option creates. 


3. Click and drag on the canvas. 
As you drag the tool, a preview of the shape is created. 


4. When the arc is the desired shape, release the mouse button. 


Using the 3D Rotation tool 


You use the 3D Rotation tool to give a garden-variety shape, such as a rectan- 
gle, the illusion of perspective. The tool is interactive; you click and drag 
until you get the result you want. Follow these steps to use the 3D Rotation 
tool: 


1. Use the Pointer tool to select the shape to which you want to add 
perspective. 
2. Select the 3D Rotation tool from the Xtra Tools toolbar (see Figure 5-11). 
3. Click and drag. 
As you drag, FreeHand draws a preview of the shape. 
4. Release the mouse button when the shape is as desired. 


FreeHand completes the 3D rotation. 


«e 


«P 
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You can modify the settings for the 3D Rotation tool by double-clicking and 
modifying the settings in the 3D Rotation dialog box. 


Using the Smudge tool 

You use the Smudge tool to create ghost images of an object. It almost looks 
like someone repeatedly mashed a rubber stamp while moving along a 
straight line; each image is more faded than the last until the effect fades 
away. To use the Smudge tool, follow these steps: 


— 


. Use the Pointer tool to select the object you want to smudge. 


2. Select the Smudge tool from the Xtra Tools toolbar, shown in 
Figure 5-11. 


Your cursor becomes a pointing finger. 


Double-click the Smudge tool to open the Smudge Tool dialog box. 
Within this dialog box, you can specify the final stroke and fill colors by 
dragging a color swatch from the Swatches, Tint, or Color Mixer panel 
into the appropriate field in the Smudge Tool dialog box. 


3. Click and drag in the direction you want the smudges to appear. 


As you drag, an outline of the shape signifies the current position of 
your cursor, and a straight line is drawn from the object’s original posi- 
tion to the current position of the cursor. The straight line indicates the 
path of the smudges. 


4. Release the mouse button when the smudge path is acceptable. 


FreeHand creates some smudges. 


Using the Shadow tool 


You use the Shadow tool to create a drop-shadow for a vector object in your 
document. You use the tool interactively by simply clicking where you want 
the shadow to appear. To create a shadow, follow these steps: 


— 


. Use the Pointer tool to select the object you want to give a shadow. 
2. Select the Shadow tool from the Xtra Tools toolbar (refer to Figure 5-11). 
3. Click and drag. 


As you drag, FreeHand creates an outline of the shadow’s current posi- 
tion and a straight line from the corner of the original object to the 
shadow. 


4. Release the mouse button when the shadow is in the desired position. 


FreeHand creates a shadow using a tint of the original fill. 
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You can vary the opacity of the shadow and change several other parame- 
ters by double-clicking the Shadow tool and specifying different parameters 
in the Shadow dialog box. 


You'll find two other useful tools on the Xtra Tools toolbar: the Bend tool 
and the Graphics Hose tool. The Bend tool bends vector objects. If you need 
to add many identical graphic elements, such as flowers or leaves, to an 
illustration, the Graphics Hose tool is the tool you need. Double-click the 
Graphics Hose tool to fill the graphic hose with preset objects from the 
Contents list, set your parameters, and then click away. 


Using Xtra Operations to Modify Shapes 


Figure 5-12: 
The Xtra 
Operations 
tools. 


You use the Xtra Operations toolbar to modify shapes and more without a 
lot of extra work. Many of the tools on this toolbar are duplicated as menu 
commands. To open the Xtra Operations toolbar, shown in Figure 5-12, 
choose Window™Toolbars™Xtra Operations. 


Most of the tools shown in Figure 5-12 have been covered previously. We 
urge you to experiment with the others, but unfortunately, we have no more 
space left to cover them. We’re going to squeeze in an introduction to one 
more tool, though: the Emboss tool. 
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The Emboss Xtra Operations tool is cool for things like buttons and just plain 
old fancy objects. The Emboss tool has so many options that it would take a 
half-hour-long infomercial — The Amazing Emboss-O-Matic — to explain 
them all. We give you the condensed version of how to use the Emboss tool. 


Figure 5-13: 


You can 
choose 
settings for 
the Emboss 
tool. 
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1. Use the Pointer tool to select the object you want to emboss. 


2. Double-click the Emboss tool in the Xtra Operations toolbar, shown in 
Figure 5-12. 


The Emboss dialog box opens, as shown in Figure 5-13. 
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3. Click a button to select an emboss style. The available styles are 
Emboss, Deboss, Chisel, Ridge, and Quilt. 


The buttons look just like the effect you get when you apply the effect to 
an object. 


4. From the Vary drop-down list, select Color or Contrast. 


If you select Contrast, use the slider to set the contrast level (drag the 
slider to the left to decrease contrast and to the right to increase con- 
trast). If you select the Color option, the Highlight and Shadow fields 
become available. Click each color swatch to choose a color from the 
color picker. 


5. Drag the slider to choose a Depth setting. 
6. Enter a value in the Angle field. 


This determines the angle from which the light source comes. 
Alternatively, you can click and drag the dial slider. 


7. Click the Apply button to preview the object with the current settings. 


If the object is embossed to your liking, proceed to Step 8; otherwise, 
choose different settings and click the Apply button to preview the 
object with the new settings. 


8. Click OK. 


The object gets embossed. 
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Chapter 6: Exploring the 
Color Management Tools 


In This Chapter 


Working with color 
Creating a color palette 
Mixing a color 

Using the Eyedropper tool 
Modifying strokes and fills 


Ur you create a FreeHand Mx illustration, you can work with as 
much or as little color as you want. You can use color sparingly if 
you’re creating an illustration for the Web, or you can use lots of color if 
you're creating illustrations for print. FreeHand gives you a wide variety of 
color tools to work with. You can mix colors, create color palettes, load 
color palettes, and more. If you like bright, vibrant objects that look three- 
dimensional in your illustrations, you can use the Fill options in the Objects 
tab of the Properties panel to create a gradient fill (a gradual transition 
between two or more colors). 


In this chapter, we show you how to use the FreeHand color tools to add 
vibrancy to every illustration you create. We explain how to work with the 
different color models to mix colors, as well as how to use the Swatches tab 
of the Assets panel to create a color palette for your document. If you prefer 
to stick with a given color, but want lighter variations of it, we detail how to 
do this with the Tints tab of the Mixer and Tints panel. 


Before you begin creating an illustration, consider its final destination. Are 
you creating an illustration for print or for the Web? If you’re creating an 
illustration for print, choose colors from the CMYK palette. If you are having 
a service center print the illustration, find out what system it uses for color 
matching and choose all your colors from that color system. We show you 
how to choose from a color system in the section, “Using the Swatches Tab 
of the Assets Panel.” 


If you’re creating an illustration for viewing on a computer, use colors from 
the RGB color model. If you’re creating a document for Web viewing, remem- 
ber the old Zen maxim: Less is more. If your viewing audience accesses the 
Internet using dial-up modems, the fewer colors you use, the smaller the file 
size, and thus the quicker the download time. 


6 14 Using the Mixer Tab 


Using the Mixer Tab 


Figure 6-1: 
You can mix 
a color in 
one of the 
three color 
models. 


You use the Mixer tab of the Mixer and Tints panel to mix up any color of the 
rainbow for your objects. You can mix a color by using one of three color 
models, or you can use the System Color Picker to add a splash of color to 
your illustration (Mac users can select colors from Crayons, a Spectrum, and 
more). The neat thing about the Mixer tab is that you’re dealing with values. 
If you have a set of values for a color (say that lovely chartreuse your client 
uses for a logo), you can match that color exactly by entering the values in 
the appropriate section of the Mixer tab. In the next few sections, we explain 
how to use each color model to mix up a shade of chartreuse, or whatever 
other color you fancy for your illustration. To open the Mixer tab, shown in 
Figure 6-1, choose Window™Color Mixer or press Shift+F9. 
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After mixing a color, you can apply it to an object or add it to the Swatches 
tab of the Assets panel. We cover these colorful tasks in the upcoming sec- 
tion, “Working with the Mixer Tab.” 


Mixing a CMYK color 


When you mix a color in the CMYK color model, you mix percentages of 
Cyan, Magenta, Yellow, and black. If your document is destined for print, this 
is the color model you should choose. Follow these steps to mix a color in 
the CMYK color model: 


1. Choose Window™Color Mixer or press Shift+F9. 


The Mixer and Tints panel, previously shown in Figure 6-1, opens. 





Figure 6-2: 
CMYK color: 
A little dab’ll 
do ya. 
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2. Click the CMYK button, which is the top button. 
The Mixer tab goes into CMYK mode. 
3. Drag the sliders to mix the color. 


As you drag the sliders, the color swatch on the right side at the bottom 
of the panel changes to reflect the current values, as shown in Figure 6-2. 
The values in each field update as well. Alternatively, you can enter 
known values in each field to match a known color, or click the arrows 
to increment the values. 
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Mixing an RGB color 

When you create illustrations that will be displayed on a Web site or as part 
of a CD-ROM presentation, you use the RGB (Red, Green, Blue) color model. 
You have 256 values (values from 0 to 255) of each color to work with. For 
example, if you create an RGB color with the following values (R = 255, G = 0, 
B = 0), you get bright red; the following values yield bright blue (R = 0, G = 0, 
B = 255); the values for black are (R = 0, G = 0, B = 0); and so on. When you 
combine the possible permutations, you end up with millions of colors. To 
mix an RGB color, follow these steps: 


1. Choose Window™Color Mixer or press Shift+F9. 


The Mixer and Tints panel opens to show the Mixer tab (refer to 
Figure 6-1). 


2. Click the RGB button, which is the second one from the top in the 
panel. 


The Mixer tab is reconfigured, as shown in Figure 6-3. 
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Color value sliders 


Color component values 





Figure 6-3: 
A dash of 
red, green, 
and blue. 























Original color 


Mixed color 


3. Drag the sliders to mix the color. 


As you drag the sliders, the color swatch on the right side at the bottom 
of the panel changes to reflect the current values. The values in each 
field also update. Alternatively, you can enter values in the text fields, 
which, by the way, is the proper way to match a known color value. 


Mixing an HLS color 

FreeHand uses HLS (Aue, Lightness, Saturation) color; you may see this 
color model referred to as HSB (Hue, Saturation, Brightness) in other pro- 
grams. When you mix a color in the HLS color model, you choose a hue and 
specify the lightness of the color and how saturated the color is. The HLS 
model is actually a color wheel. The hue is a value between 0 and 360 
degrees. Values for light and saturation vary between 0 and 100. To mix an 
HLS color, follow these steps: 


1. Choose Window™Color Mixer or press Shift+F9. 


The Mixer and Tints panel opens with the Mixer tab selected (refer to 
Figure 6-1). 


2. Click the HLS button, which is the third one from the top in the panel. 
The Mixer tab is reconfigured, as shown in Figure 6-4. 
3. Click inside the color wheel and drag to select a hue. 


As you drag, the color swatch at the bottom of the panel changes to 
reflect the color your cursor is currently over. The values in the Hue and 
Saturation fields update as well. 


4. Drag the slider to select a value for Lightness. 


The values vary from 0 (black) to 100 (white). Alternatively, you can 
enter a value in the Lightness field. 
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Color component values 


HLS color wheel 





Figure 6-4: 
You can mix 
colors via 
the HLS 
color wheel. 
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5. To specify saturation, enter a value in the Saturation field. 


You can enter a value between 0 and 100. Low values create a grayer 
variation of the color; higher values increase saturation, creating a more 
vibrant color. Alternatively, you can drag the point in the color wheel 
toward the center to decrease saturation or away from the center to 
increase saturation. 
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After you mix a color, click the button for another color mode to see the 
component values for the new color in that color mode. 


Mixing a color from the System Color Picker 


Your operating system uses specific colors to display the icons, buttons, and 
text of the software you use. You can use a color from the System Color 
Picker in your FreeHand illustrations (Mac users can choose a color from 
Crayons, a Spectrum, Grayscale, CMYK, RGB, HSB, Web safe colors, and 
more). To mix a color from the System Color Picker, follow these steps: 


1. Choose Window™Color Mixer or press Shift+F9. 


The Mixer and Tints panel opens to show the Mixer tab (refer to 
Figure 6-1). 


2. Click the System Color Picker button, which is the fourth one from the 
top in the panel. 


The Color dialog box opens, as shown in Figure 6-5. 
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Figure 6-5: 
You can 
choose a 
color from 
the System 
Color 
Picker. 








3. Click a color to select it. 


Half of the bar at the bottom of the Mixer tab of the Mixer and Tints 
panel refreshes to show the color you select. The component values for 
the color are displayed in the text fields for the color mode you choose. 
If you want to see the values for the color in CMYK, RGB, or HLS, click 
the appropriate button on the Mixer tab. 


Working with the Mixer Tab 


After you use the Mixer tab to mix the perfect hue, you can apply it directly 
to an object, use it for the current fill color, or add it to the Swatches tab of 
the Assets panel. We show you how to use the Swatches tab of the Assets 
panel to create a color palette in the upcoming section, “Using the Swatches 
Tab of the Assets Panel.” 


Using the Mixer tab to apply color to an object 


When you mix a color with the Mixer tab, you can apply it directly to the 
stroke or fill of an object in your document. To apply a color from the Mixer 
tab to an object, follow these steps: 


1. Click the swatch shown in the right half of the rectangular bar at the 
bottom of the Mixer tab. 
A square appears at the end of your cursor. 


2. While holding down the mouse button, drag toward the object you 
want to apply the color to. 


3. Release the mouse button when your cursor is over the stroke or fill 
of the object, whichever you want to change. 


The color is applied to the stroke or fill of the object. 
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Using the Mixer tab to change 
the current fill or stroke color 


If you’re getting ready to create several objects and you want to use the 
same stroke or fill color on these objects, you can replace the current stroke 
or fill color with one you mix in the Mixer tab and then create away. To use a 
color mixed in the Mixer tab as the current fill or stroke color, follow these 
steps: 


1. Click the swatch shown in the right half of the rectangular bar at the 
bottom of the Mixer tab. 
A square appears at the end of your cursor. 


2. While holding down the mouse button, drag toward the Fill Color or 
Stroke Color box. 


You can find these boxes in the Colors section of the Tools panel. 


3. Release the mouse button when your cursor is over the Fill or Stroke 
color box. 


The swatch in the Fill Color box or Stroke Color box changes to the 
color you mixed in the Mixer tab. If you have selected an object in the 
document, its fill or stroke color changes as well. 


Adding a color to the Swatches 
tab of the Assets panel 


If you mix a color you’re going to use repeatedly in the document, you can 
add it to the Swatches tab. To add a color from the Mixer tab to the 
Swatches tab of the Assets panel, follow these steps: 
1. Choose Window™Color Mixer or press Shift+F9. 
The Mixer and Tints panel opens. 
2. Mix a color. 


If you don’t know how to mix a color, read the previous section, “Using 
the Mixer Tab.” 


3. Click the Add to Swatches button at the lower-left corner of the Mixer 
tab — it’s the one to the right of the Change Attribute Color button. 


The Add to Swatches dialog box opens. 
4. Accept the default name for the color or enter one of your own. 


FreeHand uses the component values to name the color. When the color 
is added to the Swatches tab of the Assets panel, a small rectangular 
swatch of the new color is added as well. If you give the color a unique 
name, it will be easier to find if you’re creating an illustration with lots of 
colors. To give the color a unique name, type the name and press Enter. 
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5. Choose Process or Spot. 


This option refers to how the color is separated for the output device. 
Process colors are printed on four separate pages using the four process 
(CMYK) inks. Spot colors are not separated and are printed on a sepa- 
rate plate. 


6. Click Add. 
The color is added to the Swatches tab of the Assets panel. 


Creating Color Tints 


When you create a color tint, you create a lighter variation of the original 
color. You create a color tint by varying the percentage of the original color 
with the Tints tab of the Mixers and Tints panel. After you create a color tint, 
you can apply it directly to an object, add the tint to the Swatches tab of the 
Assets panel, or use it as the current fill or stroke color. To create a color 
tint, follow these steps: 


1. Create a color by using the Mixer tab of the Mixer and Tints panel. 
2. Click the Tints tab on the panel. 


The Tints tab opens, as shown in Figure 6-6. 


Tint value windows 

















Slider 
Figure 6-6: fim tres) 
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Tinted color 


3. Drag the slider to specify the percentage of the original color that will 
be used to create the tint. 


As you drag the slider, the swatch at the bottom-right of the panel 
updates to display the new tint. Compare this to the swatch at the 
bottom-left of the panel, which is the original color. Alternatively, you 
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can tint the color by clicking one of the squares (tints of the original 
color in 10-percent increments) or by entering a value in the field. 


4. After creating the tint, do one of the following: 


e Click the color swatch shown in the right half of the rectangle at the 
bottom of the panel and then drag and drop the color on an object in 
the document. 


e Click the color swatch shown in the right half of the rectangle at the 
bottom of the panel and then drag and drop the color on the Fill 
color box to replace the current fill color with the tint, or drag and 
drop the color on the Stroke color box to replace the current stroke 
color with the tint. If you have an object selected while doing this, 
the object’s stroke or fill color is changed as well. Note: The Fill color 
box and the Stroke color box are both found on the Tools panel. 


Click the Add to Swatches button to add the tint to the Swatches tab 
of the Assets panel. After you click the button, the Add to Swatches 
dialog box appears. For more information, read the preceding sec- 
tion, “Adding a color to the Swatches tab of the Assets panel.” 


If the Mixer and Tint panel is open at the same time as the Swatches tab of 
the Assets panel, you can click the color swatch at the bottom of either the 
Mixer tab or the Tint tab in the Mixer and Tint panel and then drag and drop 
it into the Swatches tab to add the color to the palette. 


Using the Swatches Tab of the Assets Panel 


When you create an illustration that uses the same colors on each page or 
for several objects, mixing the color each time you need it is time-consuming 
and inefficient. You can save a considerable amount of time if you add the 
colors you use frequently to the Swatches tab of the Assets panel. You also 
use the Swatches tab to organize and apply colors from standard preset 
color-matching systems. This option is handy if you’re creating a document 
that will be printed by a service center. If you’re creating a document for a 
Web page, you can also choose a color from the Web safe color library. 
Another option you have with the Swatches tab is saving the current color 
palette for future use. To open the Swatches tab, shown in Figure 6-7, choose 
Window™Swatches or press Ctrl+F9. 


The Swatches tab shown in Figure 6-7 already has colors added to it. The 
default colors when you create a new document are None, Black, White, and 
Registration. You cannot rename or delete these colors. Black is a spot color 
that is used for the black separation plate when printing a process color. The 
registration color, a combination of C, M, Y, and K, all at 100 percent, is used 
for crop or trim marks and prints solid on separations. 
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Figure 6-7: 
You use the 
Swatches 
tab to 
create a 
color palette 
and more. 
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You can differentiate color types in the Swatches tab of the Assets panel as 
follows: 


+ 
+ 
+ 


+ 


Process colors: The names of process colors are italicized. 
Spot colors: The names of spot colors are displayed with plain type. 


RGB colors: RGB colors display a triangular icon with red, green, and 
blue spheres after the color’s name. Colors derived from the HLS color 
wheel or the System Color Picker are displayed as RGB colors as well. 


CMYK colors: CMYK colors are displayed with no icon. 


After you open the Swatches tab of the Assets panel, you can do any of the 
following: 


+ 


Apply a color to an object: You can apply a color to the stroke or fill of 
an object by selecting the color and dragging and dropping it on an 
object. Alternatively, you can apply a color by selecting an object, click- 
ing the Fill, Stroke, or Stroke and Fill button at the top of the Swatches 
tab, and clicking the desired color’s name in the Swatches tab. 


Modify a color: You can modify a color in one of two ways: 


e Mixer tab: You can modify a color in the Swatches tab by opening 
the Mixer tab and dragging and dropping a color from the Swatches 
tab to the left side of the rectangular color swatch at the bottom of 
the Mixer tab. 


e Tints tab: You can modify a color in the Swatches tab by opening the 
Tints tab and dragging and dropping a color from the Swatches tab 
to the left side of the rectangular color swatch at the bottom of the 
Tints tab. 


Change the stroke color: You can change the current stroke color by 
selecting a color from the Swatches tab and then dragging and dropping 
it on the Stroke color box on the Tools panel. 


Change the fill color: You can change the current fill color by selecting a 
color from the Swatches tab and then dragging and dropping it on the 
Fill color box on the Tools panel. 


<r 


Using the Swatches Tab of the Assets Panel 683 


Adding preset colors to the Swatches tab 

You can add a color to the Swatches tab of the Assets panel from either 
the Mixer tab or the Tints tab, as outlined earlier in the chapter. If you 
fast-forwarded to this section and need to know how to add a color to 


the Swatches tab from the Mixer tab, read the section, “Adding a color to the 
Swatches tab of the Assets panel”; to add a tint to the Swatches tab, read the 
section, “Creating Color Tints.” In this section, we show you how to add colors 
to the Swatches tab from preset color matching systems. To add a color from 


a preset color matching system to the Swatches tab, follow these steps: 


1. Choose Window™Swatches. 
The Swatches tab of the Assets panel opens. 


2. Click the Options menu (the bulleted list icon at the upper-right 


corner of the Assets panel) and choose one of the preset color match- 
ing sets. 


If the document you’re creating will be printed commercially, find out the 
system your printer uses for color matching. For example, they may use 
one of the PANTONE or Munsell matching systems. If the document you’re 
creating will be displayed on a Web page, choose Web Safe Color Library. 
When you choose a color matching system, a dialog box appears. 


. Select a color (or colors) from the Library dialog box. 


You can select additional contiguous colors by clicking them while hold- 
ing down the Shift key, and you can select noncontiguous colors by hold- 


ing down the Ctrl key. 
4. Click OK. 


The Library dialog box closes, and FreeHand adds the selected color(s) 


to the Swatches tab and uses the color’s default library name. 


You can also double-click a color to add it to the Swatches tab, which also 
closes the dialog box. 


Renaming a color 
You can rename any color in the Swatches tab except the default colors: 
None, Black, White, and Registration. If you give a color a unique name, 
you'll have an easier time selecting it from the Swatches tab. To rename a 
color, follow these steps: 

1. Choose Window™Swatches. 

The Swatches tab of the Assets panel opens. 
2. Double-click the color you want to rename. 


The color’s name is highlighted. 
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Figure 6-8: 
You can 
Create a 
custom 
Color 
Library from 
the 
Swatches 
tab. 


3. Type a new name for the color and then press Enter. 


The color is renamed. 


Exporting a color palette 


When you create an ideal color palette, you can export the palette for use in 
documents you create in the future. This option is handy if you do work for a 
client that uses specific color combinations for their text and logo. You 
create the palette by adding colors to the Swatches tab, as outlined previ- 
ously in this chapter in the “Adding a color to the Swatches tab of the Assets 
panel,” “Creating Color Tints,” and “Adding preset colors to the Swatches 
tab” sections. After you create the palette (also known as a Color Library), 
you can export it by following these steps: 


1. Choose Window™Swatches or press Ctrl+F9. 


The Swatches tab of the Assets panel opens. 


2. Click the Options menu (the bulleted list icon at the upper-right 
corner of the Assets panel) and choose Export. 


The Export Colors dialog box, shown in Figure 6-8, opens. 


Export Colors 


1 
Select the colors to export 














Cancel | 


3. Select the colors you want to export. 


To select a color, click it. Hold down the Shift key to add a selection of 
contiguous colors to the selection, or hold down the Ctrl key to add indi- 
vidual noncontiguous colors to the selection. 


4. Click OK. 
The Create Color Library dialog box appears. 
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5. Enter a name in the Library Name field. 


Choose a meaningful name that describes the type of colors in the 
library or enter the name of the client you use the colors for. This name 
will appear in the Swatches panel’s Options menu. 


6. In the Filename field, accept the default name of CUSTOM or enter 
another name for the library file. 


If you intend to store more than one library, change the name to one that 
reflects the contents of the library. When you import the Color Library 
into a future document, this is the name you look for in the Select Color 
Library window. 


7. Click Save. 


FreeHand saves the library in the Colors folder (in FreeHand’s Settings 
folder) and the colors in it appear on the Swatches tab. 


Adding custom colors to the Swatches tab 


After you save a color palette as a library, you can use any or all colors from 
the palette in new illustrations by adding them to the Swatches tab of the 
Assets panel. To add colors from a custom library to the current Swatches 
tab, follow these steps: 


1. Choose Window™Swatches or press Ctrl+F9. 


The Swatches panel opens. 


2. Click the Options menu (the bulleted list icon at the upper-right 
corner of the Assets panel) and select the custom color library by 
clicking its name. 


The Library dialog box opens. 
3. Select the colors you want to add to the Swatches tab. 


Select an individual color by clicking its swatch. To add contiguous 
colors to the selection, hold down the Shift key and click the top and 
bottom colors you want to add. To add noncontiguous colors to the 
selection, hold down the Ctrl key and click the individual colors you 
want to add. 


4. Click OK. 
The colors are added to the Swatches tab. 
You can also copy and paste or drag and drop named colors from one open 


FreeHand document to another. The colors will be added to the Swatches 
tab automatically. 
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Using the Eyedropper Tool 


You use the Eyedropper tool to sample a color. You can sample the color 
from an object in your document, from the Stroke color box, from the Fill 
color box, or from the following panel tabs: Mixer, Tints, and Swatches. To 
sample a color with the Eyedropper tool, follow these steps: 
1. Select the Eyedropper tool from the Tools panel. 
It’s the tool with an eyedropper for an icon. 
2. Sample a color by doing one of the following: 
e Click an object in the document window. 


e Click a color swatch in any of the following panel tabs: Mixer, 
Swatches, or Tints. 


After you sample a color, hold down the mouse button and drag and 
drop the color to an object in the document. 


e The color swatch in the Mixer tab: Do this when you want to modify 
a color by using the Mixer tab. 


e The color swatch in the Tints tab: Do this when you want to tint an 
existing color. 


e The Swatches tab: Do this when you want to add a sampled color to 
the Swatches tab. 


3. Release the mouse button. 


The sampled color is applied to the object or added to the tab you 
dropped it on. 


Modifying Strokes 


You use the Object tab of the Properties panel to change the color of a 
stroke, its width, and other parameters. If the stroke is a single line, you can 
add arrowheads to the head and/or tail of the stroke. The Object tab of the 
Properties panel has enough options to fill up a whole lot of pages. You’ll 
never use many of the options, so we spare you a lot of excess verbiage by 
showing you how to modify a basic stroke in this section. To modify a stroke 
by using the Object tab of the Properties panel, follow these steps: 


1. Use the Pointer tool to select the stroke you want to modify. 


2. Choose Window™Object or press Ctrl+F3. 


The Object tab of the Properties panel opens, displaying the Stroke 
tools, as shown in Figure 6-9. 


Figure 6-9: 
You can 
modify a 
stroke’s 
appearance 
with the 
Object tab 
of the 
Properties 
panel. 
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Click the stroke in the list of Object properties to show the options for 
the stroke you want to edit. 


To change the stroke’s color, click and drag a color from the Swatches 
tab of the Assets panel onto the box to the right of the stroke indicator. 


Similarly, you can also click the Stroke color box on the Tools panel and 
select a color from there. 


Select an option from the Width drop-down list. 

Alternatively, you can enter the desired value in the Width field. 
Click a button in the Cap section to determine the path end. 

The available options are Butt, Round, and Square. 

Click a button in the Join section to determine how path ends join. 
The available options are Mitered, Round, and Bevel. 

If you chose a miter joint, enter a value in the Miter field. 


Enter a value between 1 and 57. If the line length exceeds this value, it 
will be squared off instead of mitered. 


To have a dashed stroke, select an option from the Dash drop-down 
list. 
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10. To apply an arrowhead to an open path, select an option from each of 
the Arrowheads drop-down lists. 


Use the left Arrowheads drop-down list to select an arrowhead for the 
start of the path; use the right Arrowheads drop-down list to select an 
arrowhead for the end of the path. You can select different arrowheads 
for each end of the path. You can also have an arrowhead at one end of 
the path and no arrowhead at the other. 


The settings you specify are applied to the selected stroke. When you 
create a new stroke, the stroke is created using the previous settings. 


You can use the Object tab to set stroke settings for all future strokes you 
create. Deselect all objects in the document, select a nondrawing tool, such 
as the Pointer tool, and then set stroke characteristics as outlined in the pre- 
vious steps. The characteristics will be applied to all future strokes until you 
modify the settings in the Object tab. 


If you like artistic brush strokes, select a path, open the Object tab, and then 
select Brush from the Stroke Type drop-down list. (Refer to Figure 6-9.) You 
can make the stroke look like it was painted with an artist’s brush or an air- 
brush. 


Modifying Fills 


When you add color to a shape, you give it a fill. You can modify the fill at 
any time by using the Object tab of the Properties panel. The Object tab is 
filled with all manner of different fill options. In the upcoming sections, we 
show you the most commonly used fill options. 


Creating a basic fill 
You can create or modify a basic fill through the Object tab in the Properties 
panel. A basic fill is pretty simple; it has only one color. When your design 
calls for a basic fill, here’s how you create one with the Object tab: 

1. Use the Pointer tool to select the object whose fill you want to modify. 


Alternatively, deselect all objects in the document, select a nondrawing 
tool, and the fill you create is applied to all future shapes you create. 


2. Choose Window™Object or press Ctrl+F3. 
The Object tab of the Properties panel opens. 
3. Click Fill: Basic beneath the object box in the list area of the panel. 


By default, fills are defined as Basic and are colored black, as shown in 
Figure 6-10. 
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4. Choose a color from the Fill drop-down list. 

These are the colors currently in the Swatches tab of the Assets panel. 
Alternatively, you can select a color by clicking the swatch in the Mixer 
or Tint tabs of the Mixer and Tints panel and dragging and dropping the 
color on the current color swatch in the Object tab. 
After you select a color, it is applied to the selected object, or if you 
have no objects selected, the fill is applied to all closed paths you create 
until you modify the fill. 

<r 


If there is no default fill created for an object you’re working on, you can 
create one by clicking the Paint Bucket button on the Object tab. This adds a 
fill of the default color (which is usually black) to the object. 


Creating a gradient fill 

When you create a gradient fill, you create a gradual transition between two 
or more colors. In FreeHand, you can create the following types of gradient 
fills: linear, radial, contoured, logarithmic, rectangle, and cone. Figure 6-11 
shows a comparison of the six gradient fill types. 


When you create a gradient fill, you specify each color in the fill and where 
the color is blended. To create a gradient fill, follow these steps: 


1. Use the Pointer tool to select the object to which you want to apply 
the gradient fill. 
The object must have a closed path. 


Alternatively, you can deselect all objects in the document, and the 
fill you create will be applied to closed paths you create from this point 
forward. 
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2. Choose Window™Object and, from the Object tab, select Fill: Basic 
from the area underneath the object name in the middle list area. 


3. From the Fill Type drop-down list, select Gradient. 


The Object tab is reconfigured, as shown in Figure 6-12. 
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Gradienttype Color ramp 


4. Select the appropriate gradient type from the drop-down list beneath 
the Fill Type drop-down list. 


You can choose Linear, Radial, Contour, Logarithmic, Rectangle, or Cone. 
The default gradient fill blends black and white, but you can choose any 
color. 


5. Click the color swatch at either end of the color ramp (the rectangle at 
the bottom of the tab) and choose a color from the color picker. 
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The color swatch refreshes to show the color you selected. Alternatively, 
you can click the color swatch in the Mixer or Tint tabs and drag and 
drop the color onto the color swatch on the color ramp. 


6. To add additional color points to the gradient, click a color swatch 
from the Mixer tab of the Mixer and Tints panel or from the Swatches 
tab of the Assets panel and drag and drop it to the desired position on 
the color ramp. 


You can add as many color points as needed to define your fill. After 
adding another color point, you can select a different color by using any 
of the methods outlined in Step 5. If you need to move a color pointer, 
click the color pointer and drag it to a different position on the color 
ramp. To remove a color point, click it and drag it off the color ramp. 


7. Set the options for the type of gradient you’ve selected. 


Each of the gradients has slightly different options for tweaking the fill 
pattern. In general, though, they include starting points for the gradient, 
the angle of the gradient, and the width of the gradient. 


Creating a tiled fill 

When you create a tiled fill, you copy a shape from within the document and 
use it to create a fill that displays the copied object tiled within another 
object. You can specify how large the tiled object is and change the fill ’s 
position within the filled object. To create a tiled fill, follow these steps: 


1. Use the Pointer tool to select the object (or objects) that you want to 
use as the basis for your tiled fill. 

2. Choose Edit®>Copy or press Ctrl+C. 
The object is copied to the Clipboard. 

3. Use the Pointer tool to select the object you want to fill. 


4. Choose Window™Object and select Tiled from the Fill Type drop- 
down list in the Object tab of the Properties panel. 


The Object tab is reconfigured to create tiled fills. 
5. Click the Paste In button. 


The copied shape is pasted into the window and is tiled within the 
object you are filling. 


a 


. To resize the object, enter values in the X and Y fields. 


Enter values lower than 100 to make the object smaller, and values larger 
than 100 to increase the size of the tiled object. As you enter values, the 
object’s fill changes to reflect the new parameters. Enter the same value 
in each field to resize the object proportionately. 
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Figure 6-13: 


It's not 
ceramic, but 
it is tile. 





7. Enter values in the X and Y Offset fields. 


The values you enter move the fill within the object to which it is 
applied. Enter positive X values to move the tiled fill to the right, and 
negative X values to move the tiled fill to the left. Enter positive Y values 
to move the fill up, and negative Y values to move the fill down. 


8. Drag the circular dial to set the fill’s angle. 


Hold down the Shift key to constrain the changes to 45-degree incre- 
ments. Alternatively, you can enter a value in the Angle field. Figure 6-13 
shows the Object tab being used to create a tiled fill as well as the object 
the tiled fill is being applied to. 
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Using FreeHand’s other fill types 

Getting into the nitty-gritty details of how to use FreeHand’s other fill types 
goes a little beyond the scope of this book, but we did want to at least men- 
tion what they’re used for, lest you see them in the Fill Type drop-down list 
and think, “Hey, I got robbed! Nobody told me about these.” Briefly, here’s 
what the other Fill types are designed to do: 


+ Custom Fill: Nine custom fills are available, and they include things like 
bricks, circles, and grass. Each of the fills is editable. 


+ Lens: The Lens fill allows you to set up your fill using common photo- 
realistic effects, such as transparency, lighten, darken, invert, and mono- 
chrome. Again, each of these effects is editable to your liking. 


<r 





> 


+ 
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Pattern: The Pattern fill is fun because you can watch your object 
change as you click on little boxes in a grid in the Object tab. 


PostScript: PostScript fills are standardized repeating patterns. You 
won't be able to see them on-screen — they appear only when you print 
your document on a PostScript printer. On-screen (and when output 
from non-PostScript printers), they show up as rows of the letter C. 
PostScript fills don’t scale when you scale an object; they have set 
sizes. If you’re looking for a place to get started on understanding 
PostScript, including links to other sources on the Net, check out 
www.postscript.org. 


Textured: Textured fills work almost exactly like the pattern fills, except 
that the fills are more interesting. For this type, they include burlap, 
denim, sand, and coarse gravel. 





Fun with color, FreeHand style 


You can also modify colors in your documents process colors, as well as randomize colors, 
by choosing Xtras™Colors and choosing acom- sort named colors, and more. We urge you to 
mand from the submenu. You can use these experiment with these powerful commands to 
commands to lighten, darken, or desaturate further your use of color in FreeHand. 
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Chapter 7: Integrating FreeHand 
MX with Other Macromedia 
Products 


In This Chapter 


Integrating FreeHand with Fireworks 
Integrating FreeHand with Macromedia Flash 


Integrating FreeHand with Dreamweaver 


Powe FreeHand MX is no longer part of the Studio suite, it still works 
well in tandem with the upgraded Studio applications. The applications 
continue to share some common components, and the interfaces remain 
similar, making it easy to branch out from one Macromedia application to 
another. 


In addition to sharing common interface elements, Macromedia applications 
can use items created in other Macromedia applications. For example, you 
can create a multipage FreeHand document and export it as a Flash movie. 
You can also take advantage of FreeHand’s superior illustration tools to 
create objects that would be difficult or impossible to create with Flash or 
Fireworks. You can then export the objects for use in a Fireworks document 
that will be used in a Dreamweaver Web design or incorporate the objects 
into a Flash movie or application. You can also publish a FreeHand docu- 
ment as HTML that you can modify in Dreamweaver. 


In this chapter, we show you some of the ways FreeHand integrates with 
other Macromedia applications. We explain how to export illustrations as 
images for the Web and how to export a multipage document for use as a 
Flash movie. 


Integrating FreeHand with Fireworks 


When you create artwork in FreeHand, you can export it for use ina 

Fireworks document. You can do this if you prefer the drawing toolset in 
FreeHand, but you also need to use the enhanced Web graphics features 
in Fireworks to create documents for Web pages. Fireworks also features 
enhanced optimization tools that enable you to optimize an image for an 


6 96 Integrating FreeHand with Macromedia Flash 


are 


intended destination, producing a document with the smallest possible file 
size with acceptable image quality. You can export documents as image files 
or as AJ (Adobe Illustrator) or EPS (Encapsulated PostScript) files that can 
be opened in Fireworks. For information on file types that you can open in 
Fireworks, refer to Book III, Chapter 8. 


In addition to exporting your documents to Fireworks, you can simply save 
them as FH11 files and open them directly in Fireworks. Should you choose 
to go this route, your layers will be maintained. However, after you edit the 
file in Fireworks, you'll need to save it in the native Fireworks format (PNG). 


Even though you can export a FreeHand document as a PNG file, when you 
open the file in Fireworks, all objects and layers are flattened and cannot be 
edited. 


You can also get FreeHand objects into Fireworks by dragging and dropping. 
To do this, create your artwork in FreeHand, and then launch Fireworks 8. 
You then need to resize both application windows so that they are tiled side 
by side. At this point, you can drag an object from a FreeHand document into 
a Fireworks document. Thanks to improvements in Fireworks 8, this process 
works better than ever, with more vector attributes preserved in the jump 
from FreeHand to Fireworks. 


Integrating FreeHand with Macromedia Flash 


If you’ve used Macromedia Flash, you know the software has a wonderful 
toolset for creating animations; however, traditional graphic illustrators may 
find the drawing tools somewhat quirky. Even though Macromedia Flash has 

a powerful Pen tool that enables you to create open and closed paths, if your 
training is in graphic design or illustration, you’ll find the more powerful 
FreeHand toolset preferable. In this regard, you can use the FreeHand drawing 
tools to create a multipage document in which characters change from page to 
page. In the upcoming sections, we show you how to animate the artwork you 
create in FreeHand and export the document as a Flash SWF movie file. 


Creating animations 


When you want to animate objects that you intend to use in Flash movies, 
you place the objects on separate layers. You can animate objects, groups, 
or blends. If you want to animate a single object and make it appear to move 
from one point of the page to another, follow these steps: 


1. Use the Pointer tool to select the object you want to animate, press the 
Alt key, and drag to duplicate the object. 


As you drag, FreeHand creates a preview of the duplicate’s current 
position. 


a 
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. Release the mouse button when the duplicate object is in the desired 


position. 


After you create the duplicate, you can use any tool to modify the shape. 
Do this when you want the shape to morph during the animation. For 
that matter, you can create a different object instead of creating a dupli- 
cate and then follow the remaining steps to morph from one shape to 
the other. 


. Select the Blend tool from the Tools panel. 


The Blend tool, represented by the icon with three shapes (a blue star in 
front and a red circle in the back, with a pink star between), is to the 
right of the Trace tool. 


. Click the original object and drag to the duplicate object. 


FreeHand creates a blend between the original and the duplicate objects. 


. If desired, leave the blended object selected and adjust its properties 


in the Object tab of the Properties panel. 


By default, the blend consists of 25 steps. You can change the number of 
steps as well as other properties. 


. Choose Xtras>Animate™Release to Layers. 


The Release to Layers dialog box appears. 


. Accept the default Sequence option and click OK. 


FreeHand releases the objects to layers. 


After you release the blend to layers, you can preview the animation as it 
will appear in the Macromedia Flash Player. Note: The animation sequence is 
determined by the stacking of layers, and goes from the bottom layer up. 
Objects on the Background layer are shown on all frames of the animation. 


To preview the animation as a Flash movie, follow these steps: 


1. 


Choose Window Movie Test. 


FreeHand creates an SWF file and opens the movie in another window. 
When the window opens, the animation does not automatically play. 


2. You control the movie by choosing Window™Movie and choosing one 


of these commands: 
e Play: Restarts the movie after you stop it. 
e Stop: Stops the movie. 


e Rewind: Rewinds the movie to the first frame. 
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e Step Forward: Advances the movie to the next frame. 

e Step Backward: Rewinds the movie to the previous frame. 
e Export: Opens the Export Movie dialog box. 

e Movie Settings: Opens the Movie Settings dialog box. 


After you preview the movie, close the SWF preview window. The file 
you made the movie from is open in the FreeHand window. 


Using ActionScript 


When you create a document in FreeHand with the intention of exporting it as 
a Flash movie, you can integrate ActionScript in the Flash movie. ActionScript 
adds a degree of interaction to a Flash movie. You can assign ActionScript to 
objects in your FreeHand movie that cause the movie to advance to another 
frame, stop, enable users to drag an object from one place to another, and so 
on. You choose which event causes the ActionScript to execute; for example, 
the downstroke or upstroke of a mouse click. The ActionScript is embedded 
in the Flash movie you export. You can assign one of the following actions to 
an object in a FreeHand document: 


+ 


++ ++ 


+ 


Go To: Advances the movie to another frame or scene. 
Play: Plays the movie frame by frame. 

Stop: Stops the movie. 

Print: Prints the frame. 


Full Screen: Displays the movie in Full Screen mode, regardless of the 
document size. 


Start/Stop Drag: Causes the object to be draggable, based on the event 
you choose; for example, when a user presses the mouse button. 


You can assign ActionScript to a bitmap image or object in your FreeHand 
document by following these steps: 


1. 


Use the Pointer tool to select the object to which you want to assign 
ActionScript. 


. Choose Window®Navigation. 


The Navigation panel appears, as shown in Figure 7-1. 


. Select an action from the Action drop-down list. 


You can select any of the actions listed in the previous bullet list. 


. Select the event that triggers the action from the Event drop-down list. 


For more information on ActionScript events, refer to Book IV, Chapter 8. 





Figure 7-1: 
Some 
options in 
the 
Navigation 
panel may 
be 
unavailable, 
depending 
on other 
options 
selected. 
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5. If the action you select requires parameters, the Parameters drop- 
down list becomes active. Select the parameter that suits the way you 
want the action to execute. 


For more information on ActionScript parameters, refer to Book IV, 
Chapter 8. 


6. Close the Navigation panel. 


The action is added to the object. Test the movie to make sure the 
action executes properly. 


Exporting Flash movies 


After you create an animation and add ActionScript to objects in the docu- 
ment, you can export the document as a Flash movie. You can export the 
movie for the Macromedia Flash Player 7. To export your document as a 
Flash movie, follow these steps: 
1. Choose FileExport. 
The Export Document dialog box appears. 
2. From the Save as Type drop-down list, select Macromedia Flash SWF. 
3. Click the Setup button. 
The Movie Settings dialog box, shown in Figure 7-2, appears. 


4. In the Optimization section, select compression options from the Path 
Compression and the Image Compression drop-down lists. 


The default compression setting is Medium. Select a higher setting to 
create a smaller file size with lower image quality. Select a lower setting 
for higher image quality at the expense of a larger file size. 
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Figure 7-2: 
Control 
movie 


parameters 
with the 
Movie 
Settings 
dialog box. 
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5. If your document has dashed lines, you can convert them to individ- 


ual objects by selecting the Trace Dashed Strokes check box. 


If you select this option, FreeHand creates an individual object for each 
dash. This results in a larger file size, but you can edit each dash as an 
object if you import the movie into Macromedia Flash. If you don’t con- 
vert the dashed lines to individual objects, they will be converted to 
solid lines. 


. Select one of the following options from the Text drop-down list: 


e Maintain Blocks: Select this option if you want to be able to edit the 
text when you import the file into Macromedia Flash. 


e Convert to Paths: Select this option, and FreeHand converts text 
objects to paths that cannot be edited as text in Macromedia Flash. 
This results in a smaller file size. 


e None: Select this option, and FreeHand does not export text objects 
with the Flash movie. 


. In the Export Options section, select a Page Range option. 


This determines how many pages of the document are exported as 
frames. Select the All option to export all pages or enter specific page 
numbers in the From and To fields. 


. If your document has more than a single page, select the single or 


multiple option from the Movie radio buttons. 


If you select the Single option, all the pages in your document will be 
exported as a single movie. If you select the Multiple option, each page 
will be exported as a separate movie. 


«e 


10. 


11. 


12. 


13. 


14. 


15. 


16. 
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. Select one of the following options from the Layers radio buttons: 


e Animate: Select this option to export each page as a separate SWF 
file. Layers on each page are converted to frames. 


e Flatten: Select this option to export each page of the document in a 
single SWF file. Layers on each page are flattened to a single image. 


Accept the default frame rate of 12 fps (frames per second) or enter a 
different value. 


This value is the number of frames that result in one second of playback 
in the Flash movie. Enter a lower value for a smaller file size that may 
cause jerky motion when the movie is played; enter a higher value for 
smoother motion at the expense of a larger file. 


Select the Autoplay option (enabled by default), and the movie begins 
playing as soon as it loads into the Macromedia Flash Player. 


Deselect this option if you have added ActionScript that causes the 
movie to begin playing when a user clicks an object in the Flash movie. 


Select the Full Screen Playback option, and the exported Flash movie 
expands to fill the user’s screen. 


The user can exit full-screen mode by pressing the Esc key. 


Select the Protect from Import option, and the movie cannot be 
imported into Macromedia Flash MX 2004, or any previous version. 


This option prevents other animators from dissecting your handiwork in 
any version of Macromedia Flash. Do not select this option if you intend 
to use the exported Flash movie as part of another production you are 
editing in Macromedia Flash. 


Click OK. 
The Movie Settings dialog box closes. 


Enter a name for the file and specify the folder to which you want the 
file saved. 


Click the Save button. 


FreeHand exports the file as an SWF movie. 


FreeHand MX allows you to edit the Flash source file of an imported SWF file 
by selecting the SWF and clicking the FreeHand to Flash button in the Object 
tab of the Properties panel. You may have to navigate to the FLA source file if 
the Locate Macromedia Flash Document File window appears. Edit the 
source file in Macromedia Flash and click the Done button. Macromedia 
Flash exports the updated movie and closes. The updated SWF shows up 
automatically in FreeHand. 
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Integrating FreeHand with Dreamweaver 





Figure 7-3: 
We typed a 
URL in the 
Link field of 
the 
Navigation 
panel. 





The artwork that you create in FreeHand can be exported in formats you can 
use in a Dreamweaver HTML document. You can export documents as JPEG 
or GIF files. You can also export documents as SWF files that you can then 
embed in Web pages you create within Dreamweaver. 


In addition, you can add navigation links to objects in your FreeHand docu- 
ments and publish the document as an HTML file. If this piques your curiosity, 
please read the following sections. 


Adding navigation links 

You can add a navigation link to any object in a FreeHand document. This 
option is handy when you intend to publish the document as an HMTL file. 
To add a navigation link to an object in a FreeHand document, follow these 
steps: 


1. Use the Pointer tool to select the object to which you want to add the 
link. 


You can add a link to a text object, a path, or a bitmap image. However, if 
you assign a link to an open path, you don’t give the user much of a 
target area to click. 


2. Choose Window™Navigation. 


The Navigation panel opens, as shown in Figure 7-3. 
































3. In the Link field, enter the URL you want linked to the object. 


This is the Web page that appears in the user’s browser when the link is 
clicked. If the Web page is at the same Web site, you only need to enter 
the filename of the page you want opened when the link is clicked; for 


Figure 7-4: 
Exporting a 
FreeHand 
file as 
HTML. 
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example: myPage.htm. If the file is in a different directory, you need to 
enter the relative path to the file; for example, htmldocs/myHtmldoc. 
htm. If the Web page resides at another Web site, you need to enter the 
absolute path to the Web page, such as http: //www.dasdesigns. 
net/about.htm. 


4. Close the Navigation panel. 


The link is assigned to the object and will be written as HTML code 
when the document is published as an HTML file. 


Publishing a document as HTML 


When you create a FreeHand document that you intend to use as a Web 

page, you can publish the document as an HTML file that you can edit in 
Dreamweaver. When you publish a FreeHand document as an HTML file, 
FreeHand writes the HTML code needed to display the objects and bitmaps 
in the document in a Web browser, as well as to create any links you assigned 
to objects in the document. To export a FreeHand document as an HTML file, 
follow these steps: 


1. Choose File™Publish as HTML. 
The HTML Output dialog box opens, as shown in Figure 7-4. 





HTML Output 
HTML Setting: [Default ~] Setup | 
Pages: © Al | 


C From: | To: | 


¥ Show Quipss Warnings 
I Views in Browser oe HTML Editor 





fiexplore 6,00.2800,1106 ~| Browse. | 
| 





Wizard, Save as HTML Cancel 











2. Click the Setup button. 
The HTML Setup dialog box appears, as shown in Figure 7-5. 


3. In the Document Root field, enter the folder where the files for your 
Web site are stored. 


If you’re using the file in a Web site you’ve already created in 
Dreamweaver, store the file in the same directory as your Dreamweaver 
HTML documents. 
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Figure 7-5: 


Customizing 
the HTML 
setup. 
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4. Select one of the following options from the Layout drop-down list: 


e Positioning with Layers: Select this option, and FreeHand creates 
HTML code that positions the objects using HTML layers. This 
option precisely places each object in the document. Browsers capa- 
ble of decoding HTML 3.0 or greater support layers. 


e Positioning with Tables: Select this option, and FreeHand creates an 
HTML document with a table. Each object in the document is placed 
in a table cell. Overlapping objects are sliced or combined to fit table 
cells. Most popular Web browsers support tables. 


. Select the option applicable to the language in your document from 


the Encoding drop-down list. 


The default, Western (Latin 1), is the proper encoding format for the 
English language. 


. Select one of the following options from the Vector Art drop-down list: 


GIF, JPEG, PNG, or SWF. 


This option determines which format FreeHand uses when converting 
paths in your document to images that will be displayed in a Web 
browser. 


. Select one of the following options from the Images drop-down list: 


GIF, JPEG, PNG, or SWF. 


This option determines the file format FreeHand uses to convert bit- 
map images in your document into images that are displayed when the 
HTML document is loaded into a Web browser. If the image has millions 
of colors, choose JPEG. If the image has large areas of solid color, 
choose GIF. 


. Click OK. 


The HTML Setup dialog box closes, and you’re back at the HTML Output 
dialog box. 
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9. Select an option for Pages. 


You can publish all pages as HTML documents or specify a range of 
pages to publish. 


10. Select the Show Output Warnings option (selected by default), and 
FreeHand displays the HTML Output Warnings dialog box when con- 
verting the document to HTML. 


The HTML Output Warnings dialog box warns you of any potential anom- 
alies that would prevent the page from displaying properly in a Web 
browser. 


11. Select the View in Browser or HTML Editor option. 


This option is selected by default. When the document is converted, 
FreeHand opens the exported HTML document in your default Web 
browser. You can specify another Web browser or HTML editor by click- 
ing the Browse button and using the Open dialog box to navigate to the 
folder where the browser or HTML editor is located. 


12. Select the Save as HTML Click/button. 


FreeHand converts the file to HTML format, and the HTML Output 
Warnings window appears (it may be hidden behind the browser 
window). The file is displayed in your default browser if you choose this 
option. If the file is displayed in a browser, you can check to make sure 
the links are working properly. When the file is saved, if you didn’t spec- 
ify otherwise in Step 3, FreeHand creates a folder named FreeHand 
HTML Output and saves the HTML file to it. Within the FreeHand HTML 
Output folder is a subfolder named Images that stores the vector and 
bitmap artwork from the document. 


After you publish a document as HTML, you can edit the file by opening it in 
Dreamweaver, modifying the document to suit the Web site it will be dis- 
played on, and then uploading the file to a Web site. When you upload the 
HTML file, you will have to upload any associated images from the Images 
folder as well. 
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Book VII 


ColdFusion MX 7 
Developer Edition 





The 5th Wave By Rich Tennant 





“L have to say Tm veally impressed with 
the interactivity on this car wash Web site” 
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Integrating ColdFusion MX 7 Developer Edition with Other Macromedia 


Chapter 1: Introduction to 
ColdFusion MX 7 Developer Edition 


In This Chapter 


Defining dynamic Web sites 

Understanding the components of ColdFusion 

Beginning to work with the ColdFusion application server 
Working with databases 

Integrating ColdFusion with the rest of Macromedia Studio 


oldFusion MX 7 Developer Edition is a rapid development environment 
for creating dynamic — not to mention compelling — Internet applica- 
tions. Three main components make up ColdFusion: 


+ Application server 
+ Administrative tool 


+ Custom scripting language 


Together, these three components give you a diverse set of tools that make 
ColdFusion the quickest and easiest way to bring dynamic, interactive, and 
database-driven content to your Web site. (A database is a program, such 

as Microsoft Access, that is used to collect information in tabular format, 
namely, rows and columns.) In this chapter, we give you a basic introduction 
to each of the three components as well as an overview of what makes a 
Web site dynamic. 


Creating Dynamic Web Sites 


Web pages are wonderful. After you create a page with HyperText Markup 
Language (HTML) and then upload it to a Web server (a program such as 
Microsoft Internet Information Server [IIS] or Apache that enables people to 
view your Web site), it’s ready to be viewed by the world. If you know HTML, 
this approach is simple, but it can create problems when your Web site 
expands in size and complexity. When your Web site grows, you may find 
yourself wanting to do one or more of the following: 


+ Display Web pages for a variety of different products or services by 
maintaining the same look and feel (each page having the same banner, 
company logo, background image, and so on). 


710 Creating Dynamic Web Sites 


+ Sort and display the same content in different ways; for example, you 
may want to highlight sports articles over news articles on a page if a 
user is more interested in sports than news. 


+ 


Customize content based on actions that a user takes at a site. 


+ Personalize content based on preferences that a user sets when visiting 
your site. 


+ Allow users to perform complex searches of documents and databases. 


+ Create shopping carts and user accounts that keep track of purchases 
and other shipping information. 


If you’ve ever wanted to do any of these things, you’re longing to create a 
dynamic Web site. Dynamic Web sites use a Web application server, such as 
ColdFusion, to extend the capabilities of a standard Web server by creating 
custom content for each browser request. A Web application server can also 
connect to a database to retrieve information used to build pages, or it can 
save information submitted by the user. 


To demonstrate what we’re talking about, take a look at the Web site for the 
California HealthCare Foundation, as shown in Figure 1-1. This foundation 
provides a diverse set of information — reports, studies, analyses — ona 
wide array of healthcare topics. Note in the figure that you can click any of a 
number of relevant healthcare-related topics. Within each of these topics are 
literally hundreds of articles. 


Instead of creating static (nonchanging) pages for each of these topics and 
their subsequent articles, the foundation can instead use the ColdFusion 
application server and a database to drive its Web site, which allows the 
foundation to use a handful of ColdFusion pages to do the following: 


+ Look up the basic information about any number of reports and studies 
that the foundation funds. 


+ Insert data from a database into a specific topic or report template. A 
template is a bit of HTML and ColdFusion Markup Language (CFML) code 
that gets combined with data from a database to help construct a Web 
page. Several templates may make up one individual page. 


+ Display the topic or report page for an item that the user requests via a 
Web browser. 


The idea behind creating a dynamic Web site is to create the least number of 
templates to represent the largest number of pages on the site. This way, 
when you change something on the site, you don’t have to make the change 
on every single page. 


Figure 1-2 shows a topic within the California HealthCare Foundation. If you 
compare Figure 1-2 with Figure 1-1, you can see that the topics are different, 
but the architecture (design) of the two pages is identical. 
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Figure 1-1: 
The 
California 
HealthCare 
Foundation: 
a dynamic 
Web site. 








Figure 1-2: 
Another 
topic within 
the 
foundation. 
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Exploring the Components of ColdFusion 


The workhorse of ColdFusion is the application server, which provides a 
fast, reliable platform for your Web applications. To make the most of this 
powerful application server, you must be able to configure and control it, 
which you do with 


+ ColdFusion Administrator: The ColdFusion Administrator allows you to 
configure the server to meet your specific needs. (Read more about this 
in the upcoming section, “Working with the ColdFusion Administrator,” 
and in Book VII, Chapter 2.) 


+ ColdFusion Markup Language (CFML): ColdFusion Markup Language 
can be used to communicate instructions to the application server. 
(Read more about CFML in the upcoming section, “Investigating CFML,” 
and in Book VII, Chapter 4.) 


The ColdFusion Application Server is built on top of the Java 2 Platform, 
Enterprise Edition (J2EE). Check out the Sun Microsystems Web site at 
http://java.sun.com for more information on J2EE, where it came from, 
and who supports it. 





Understanding the Role of the Web Application Server 


An application server executes the business logic of your Web application. By 
business logic, we mean the way in which you want something to run for your 
business — in this case, how you want your Web site to display content. Your 
business logic may be as simple as verifying (that is, ensuring that users have 
entered all the required information) the data that the user enters in a form 
on your Web page and inserting it into a database. No matter what sort of 
task you need to accomplish, if it requires any sort of logical processing (con- 
version of CFML code to HTML), the application server is the component of 
ColdFusion that does the work. 


The infrastructure of most Web applications can be divided into three parts, 
which are commonly referred to as a three-tier architecture: 

+ Display tier: A Web browser 

+ Application tier: ColdFusion 

+ Database tier: Any compatible database 
The application server is responsible for managing the interactions between 
all three of these tiers. It accepts inputs from the Display Tier, interprets the 


CFML in the Application Tier, and brokers requests to databases at the 
Database Tier. 


ar 
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Investigating CFML 


In a three-tier application, the application server executes all the business 
logic, as we discuss in the preceding section. In ColdFusion, you use CFML to 
build that business logic. 


CFML provides the instructions for each page while it is processed by the 

application server. Like HTML, CFML uses tags, which instruct the applica- 

tion server as to what kind of functions to perform. Built-in tags can handle 

many common tasks required by Web applications, including the following: 
+ Page formatting 

Form validation 

Database access 

Generating and sending e-mail 


User security 


+++ 4 4 


Generating charts and graphs 


In addition to tags, CFML also includes hundreds of built-in functions (best 
to think of them as tools built into ColdFusion) that you can use to test and 
manipulate your data. By adding CFML tags and functions to your pages, you 
build the instructions for the application server. We cover CFML in more 
detail in Book VII, Chapter 4. 


Working with the ColdFusion Administrator 


ColdFusion Markup Language provides the application server with instruc- 
tions for each page, but some information (such as database connectivity) is 
configured only once for the entire server — and thus, all the sites that use 
that server. The ColdFusion Administrator is used to control server-wide set- 
tings, such as the following: 


+ Database connections 


+ Variable scopes (check out Book VII, Chapter 3 for more information on 
what variable scoping means in the context of ColdFusion) 


+ Debugging options 
+ Security settings 
+ Application logging 


The ColdFusion Administrator is used not only to set up your server, but it’s 
also a valuable maintenance tool for reporting on things occurring in your 
Web site. We cover the ColdFusion Administrator, including how to use it to 
set up database connections, change your logging settings, set your debug- 
ging options, and optimize the speed of your Web site, in more detail in Book 
VII, Chapter 2. 
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Setting Up the ColdFusion Environment 


To begin working with ColdFusion, you need access to a working server. 
You may want to find an Internet service provider (ISP) that already runs 
ColdFusion, or you can install your own server right on your desktop PC. 

Be aware that ColdFusion Server has traditionally been available for both 
the UNIX and Windows environments, but Macromedia Studio is a Windows- 
and Macintosh-only product, and the Macintosh version of Macromedia 
Studio does not include ColdFusion. 


Finding an ISP 


If you need to get a site up and running as soon as possible, hosting your 
Web application via an ISP saves you the trouble of installing and configuring 
your own server. You generally have limited control over the server configu- 
ration with an ISP, but that drawback is usually outweighed by the other ben- 
efits of using an existing server. 


A large number of ISPs have offered ColdFusion hosting for years, and many 
of these providers now support ColdFusion. You need to check the version 
of ColdFusion that the ISP supports before you sign up. Here are some of the 
more well-known ColdFusion ISPs: 


+ CrystalTech: www.crystaltech.com 
+ CFDynamics: www.cfdynamics.com 
+ Definitive Web Solutions: www. dwsgroup.com 


+ Edge Web Hosting: www. edgewebhosting.net 


Installing the application server 


Installing your own application server on your PC is a great way to learn 
about ColdFusion. The Developer Edition is designed for a single user 
machine for personal development. Previous editions of Studio MX included 
the ColdFusion Developer Edition. With Studio MX 8, Macromedia eliminated 
ColdFusion MX 7. To take advantage of ColdFusion using Studio MX 8, go to 
the Macromedia Web site at www.macromedia.com/software/coldfusion 
and download the Developer Edition. 


After you download the ColdFusion MX 7 Developer Edition from the 
Macromedia Web site, you can set up the program by following these steps: 


1. Double-click the Macromedia ColdFusion MX 7 installation executable 
file. 


After the installer finishes loading, notice the dialog box that prompts 
you to pick a language for your ColdFusion installation. 


«e 
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. From the ColdFusion MX 7 installation screen, select your language 


and then click OK. 


3. Click Next on the initial installation screen. 


4. Select the I Accept the Terms in the License Agreement radio button 


10. 


on the Licensing Agreement screen and then click Next. 


. Enter the ColdFusion serial number in the Serial Number field or 


select the 30-Day Trial (Enterprise Edition) or the Developer Edition 
(Single-IP Only) check box; then click Next. 


If you already have an installation of ColdFusion MX on your system, the 
installer will preselect the Update ColdFusion MX to ColdFusion MX 7 
radio button. Otherwise, it selects the Install New Version of ColdFusion 
MX 7 option. 


. Select the Server Configuration radio button on the Install 


Configuration screen and then click Next. 


. If you have a previous version of ColdFusion server running on your 


machine, select Next at the warning screen reminding you to shut 
down all ColdFusion services. 


Having ColdFusion completely shut down when installing an upgrade is 
always a good idea. 


. Select the ColdFusion subcomponents you want to include in your 


installation. 


In nearly all cases, install all the subcomponents. 


. Choose the directory in which you want to install the product. 


By default, ColdFusion installs the product in C: \CFusionMx7 and the 
Web files in C: \CFusionMX7 \wwwroot. You can change this by clicking 
the Change button. Otherwise, you can just click the Next button to 
install into the default directories. 


As a general rule, install your Web files on the D: drive if you have a 
partitioned drive (meaning a C: drive and a D: drive that are both hard 
drives). This helps prevent potential hackers from finding any other 
information on your computer, should you be attacked. 


Select the Web server you want to use with ColdFusion and then click 
Next. 


For personal development on a single machine, select the Built-In 

Web Server option (as you may or may not have another Web server 
installed on your machine). For Microsoft IIS, you can configure the All 
IIS Websites option as shown in Figure 1-3. If you choose the Configure 
Specific IIS Website or Another Web Server radio button, you must click 
Add and step through the wizard. 
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Figure 1-3: 
Selecting a 
Web server. 





Figure 1-4: 
Entering 
passwords. 
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11. Select the directory location for the ColdFusion Administrator. 


By default, this is the location that maps to the Web server you specified. 


For example, if you chose Microsoft IIS, the location is C: \1 





[Inetpub\ 


wwwroot. If your administrator directory is different from the one speci- 
fied, enter it in the path provided. 


12. Enter and confirm your Administrator password; then click Next. 


This password is required to enter the ColdFusion Administrator. 


13. Enter and confirm your password for Remote Development Service 
(RDS), as shown in Figure 1-4. 





a Introduction 
~ License Agreement 


= Configure Installer 
Configure ColdFusion MX 


Sees 
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Administrator Password 


Enter the password that you will use to control access to the 
ColdFusion MX Administrator. 


This field is required. 





Enter password: DEEE EEE ES 


Confirm password; 9 ******=+] 





Previous Next 








EN 


14. 


15. 
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This password is required to allow you to connect to your ColdFusion 
server remotely for development purposes. 


Review your installation settings and then click the Install button to 
install the product. 


Installation takes a few minutes, and the progress is shown as the instal- 
lation is occurring. 


After the installation is complete, click the Done button to complete 
your installation. 


Leave the Launch the Configuration Wizard in the Default Browser radio 
button selected to go directly to the ColdFusion Administrator and finish 
configuring your server. 


Configuring the application server 


After the installation is complete, you can test and configure your applica- 
tion server by loading the ColdFusion Administrator: 


1. 


Load the ColdFusion Administrator. 


Do this by using the shortcut in the Start menu or navigating directly to 
http://localhost:8500/CFIDE/administrator/index.cfm 
(http: //127.0.0.1/CFIDE/administrator/index.cfmalso 
works) via your Web browser. (The administrator is a Web-based 
application.) 





. Enter your password. 


Use the username and password for the administrator (as opposed to 
the RDS; see Step 12 in the list in the preceding section) that you created 
during the installation process to log on as the administrator, as shown 
in Figure 1-5. 


A number of administrative tasks, including setting up database connec- 
tions, configuring e-mail, and setting your debugging options, are covered in 
more detail in Book VII, Chapter 2. 


If you’re using another Web server, such as IIS or Apache, you also need to 
make sure that that application server is running properly and that it has its 
default directory as the same location where you installed ColdFusion. 


Book VII 
Chapter 1 
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Figure 1-5: 
The 
ColdFusion 
Administra- 
tor logon. 
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Introducing Databases 


Databases are often an integral part of any dynamic site, and ColdFusion is 
no exception. A database, in very general terms, is simply a structured set 
of data. The power of a database is in its ability to organize data for easy 
retrieval when requested. If you’ve ever used a spreadsheet program, such 
as Microsoft Excel, you’ve probably created a structured collection of data 
that could, in fact, be a database. 


Databases are generally made up of the following elements: 


+ Tables: The containers for similar sets of data, made up of columns, 
rows, and cells. For example, a table might contain records (a collection 
of rows in a table) of all your products. 


+ Cells: The individual blocks that make up the table. Cells contain only a 
single piece of data and are grouped by columns and rows. 


+ Columns: The vertical block of cells that groups the data in the table 
into categories. Using our previous example of the product table, the 
data entered into columns in that table might include things like Name, 
Price, and Description. 





Figure 1-6: 
Atypical 
Microsoft 
Access 
table. 
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+ Rows: The horizontal block of cells in a table that contains the informa- 
tion for each individual record, spanning all the columns. Using the 
example of the product table, a row contains all the information about a 
single product, such as Silver Streak Bowling Ball, $200 and 
The finest pure silver bowling ball money can buy. 


Databases come in all shapes and sizes, from the simple to the complex. 
Following are the most common database types: 


+ Flat file: A text file that contains a single set of columns and rows, with 
the data usually being separated by commas or tabs. A Comma Separated 
Values (CSV) file is an example of a flat file. 


+ Relational: A collection of tables with common data elements (values in 
like-rnamed columns) between them, providing expanded collection and 
reporting capabilities. These usually require a query language to 
retrieve information from the database. 


When you become more comfortable with ColdFusion, you begin to see (and 
of course, we show you!) just where databases can be extremely useful. For 
now, you can whet your appetite by checking out Figure 1-6, which shows an 
example of a database table in Microsoft Access. Relational database design, 
which is central to harnessing the power of ColdFusion, is covered in more 
detail in Book VII, Chapter 6. 
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Taking a Quick Tour of ColdFusion in Dreamweaver 


Dreamweaver 8 is specially designed to make writing ColdFusion pages 
easier. The great thing about Dreamweaver is its ability to flip back and forth 
between Code view and Design view: 


+ Code view: Gives you direct control over the code. If you’ve used previ- 
ous versions of ColdFusion Studio or HomeSite (the HTML editor that is 
part of previous versions of ColdFusion), you may notice that the Code 
view in Dreamweaver looks similar to those products. 


+ Design view: Enables you to see a visual representation of your page, 
just like it would appear in a Web browser. 


+ Split Screen mode: Displays both the code and the graphical representa- 
tion on your screen, as shown in Figure 1-7. 
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When you're using Code view, many features are available to you that are 
made specifically for ColdFusion development: 


+ 


+++ 


+ 


CFML toolbars 
CFML function auto-complete 
CFML validation 


Code view that works similarly to previous versions of HomeSite and 
ColdFusion Studio 


Debugging commands 
ColdFusion server connection 
Drag-and-drop components 


Database access 


These features are covered in more detail in the rest of Book VII. 
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Chapter 2: Working with the 
ColdFusion Administrator 


In This Chapter 


Understanding the ColdFusion Administrator 
Creating data sources 

Configuring an e-mail server 

Logging events on the application server 


Using debugging options 


B efore you begin writing code for your Web application, familiarize your- 
self with the ColdFusion server. If you’re running your own server, you 
have the ability to set things up just the way you want. Even if you’re using a 
preconfigured server at your Internet service provider (ISP), you want to 
know how the server is configured to aid in your development process. 


This chapter walks you through a few important tasks that are accom- 
plished in the ColdFusion Administrator. 


Exploring the Functionality of 
the ColdFusion Administrator 


The ColdFusion Administrator is a Web application that helps the human 
administrator manage the server by controlling a wide array of server set- 
tings. Although several of the server settings are aimed at giving the devel- 
oper important information to assist in the writing of ColdFusion Markup 
Language (CFML) pages, the ColdFusion Administrator does not create CFML 
pages. 


Many of the tasks in the ColdFusion Administrator are directly related to 
tasks that a ColdFusion developer carries out. For example, a developer 
cannot query a database if the database is not registered as an active data 
source through the Administrator. After a server is configured properly with 
the ColdFusion Administrator, the CFML developer can create a Web appli- 
cation that uses the many features of the application server. 
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Table 2-1 shows how the server settings correspond to actual CFML pages. 





Table 2-1 How the ColdFusion Administrator Helps the Developer 





ColdFusion Administrator's Function What the Developer Does with That Function 





Configures the e-mail server Creates Web pages to send e-mail. 





Sets up data sources (connections Adds, edits, and deletes information in databases. 
to databases) 





Sets up search collections Uses CFML to perform searches on documents 
and databases. 





Sets up debugging options Outputs all the queries, variables, and processes 
at the bottom of the rendered ColdFusion page so 
that developers can monitor and fix their code. 





Defines Web services Creates Web services. A Web service is a bridge 
from your application server to another server 
with an application that you want to be able to 
access from within your application. This is a new 
feature to ColdFusion. 





Logging On to the ColdFusion Administrator 


Before you can work with any of the administrative tools in ColdFusion 
Administrator, you must first log on, which is a two-step process: 


1. Launch the ColdFusion Administrator. 


Because the Administrator is a Web application, you access it with your 
browser. The default URL of the logon page is http: // servername/ 
cfide/Administrator/index.cfm, where servername is the 
Internet Protocol (IP) number or fully qualified domain name of your 
server. If you’re using the ColdFusion Web server, it uses port 8500, 

so the URL becomes 
http://localhost:8500/cfide/Administrator/index.cfm. 


When you enter this URL, the logon screen appears, as shown in 
Figure 2-1. 


2. Enter your password. 


When you installed ColdFusion (See Book VII, Chapter 1 for more on 
installing ColdFusion MX 7 Developer Edition), you were asked to provide 
a password for the Administrator. Similarly, if you’re using ColdFusion 
Administrator at your ISP, your ISP should have provided you with a pass- 
word to log on to the ColdFusion Administrator. No username is required, 
and all administrative users use the same password. 
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The 
ColdFusion 
Administra- 
tor logon 
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Book VII 
ay? If you’re working in a secure development environment (one that is insulated Chapter 2 
from external Web activity) or using Remote Development Services (RDS), 
you can choose to turn off the password protection by clicking the CF Admin 
Password hyperlink or the RDS Password hyperlink under the Security sec- 
tion in the left navigation frame of the ColdFusion Administrator. This just 
means that you’ll have one less password to worry about! 
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Working with the ColdFusion Administrator 


The ColdFusion Administrator tasks are divided into eight sections. Each of 
these sections, and their associated tasks, is listed as a series of text links 
on the left-hand side of all Administrator pages. The sections, shown in 
Figure 2-2, are as follows: 


+ Server Settings: The tasks in this section control how the ColdFusion 
server behaves. The settings here affect overall server performance. 


+ Data & Services: These tasks control how the ColdFusion server con- 
nects to and exposes databases, Verity search indexes (collections 
of data used to power ColdFusion’s built-in search engine), and Web 
services. 
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+ Debugging & Logging: This section has tasks used to set debugging and 
logging options, as well as tools to analyze your system and schedule 
tasks. 


+ Extensions: Tasks here allow you to install and remove components that 
extend the ColdFusion server’s capabilities. 


+ Event Gateways: The settings in this new section for ColdFusion MX 7 
allow you to control how ColdFusion applications handle requests from 
devices that are not traditional Web browsers. 


+ Security: The security tasks include setting passwords and controlling 
access to resources. 


+ Packaging & Deployment: In this section, you can create and deploy 
archives that allow you to move your settings easily from one server to 
another. 


Creating Data Sources 


When you want to use information from a database in your Web application, 
you need to register the connection to the database with the ColdFusion 
Server. This registration process creates a data source. Each data source 
has a unique name that you use in your CFML to connect to the underlying 
database. 
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ay? Many popular databases, such as Microsoft Access, Microsoft SQL, and 
MySQL, can be registered as data sources. After your data source has been 
set up, you can use the <CFQUERY> tag to access the data. We show you how 
to do this in more detail in Book VII, Chapter 4. 


Setting up a data source 


The exact procedure for setting up a data source varies, depending on the 
type of database that you’re registering. In this section, we outline the 
process for creating a connection between the ColdFusion server and 
Microsoft Access. Access is the most common database that is used with 
ColdFusion. If you are registering a different type of database, the process 
will be different after Step 4. Here’s how you do it: 


1. Under the Data & Services section in the left navigation frame of the 
ColdFusion Administrator home page, click the Data Sources link. 
This brings up the Data Sources main page, as shown in Figure 2-3. 


2. In the area titled Add New Data Source, enter a name for your data 
source in the Data Source Name text field. 


As a general rule, this name should not include any spaces. 
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You use s DSN to connect ColdFusion to a variety of data sources. 
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3. From the Driver drop-down list, select the database driver that 
matches your database. 


We use Microsoft Access for this example. 
4. Click the Add button. 


The Data Source Driver Information page, as shown in Figure 2-4, 
appears. On this page, you enter specific information about your 
database. 


5. Click the Browse Server button next to the Database File field to find 
the database file that you want to register. 


In this case, the file is a Microsoft Access database, which has the file- 
name extension .mdb. You can also type the pathway directly in the 
Database File field. 


6. Leave the System Database File field blank. 


From this field, you can choose to use Windows NT/Windows 2000 
security by selecting a system database. (You click the Browser Server 
button to select a system database.) In reality, very few people use this 
feature, largely because of concerns about possible holes in Windows 
NT/Windows 2000 security. If you do want to use it, though, the default 
location for this file is C: \winnt\system32\system.mdw. 
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7. Select the Use Default Username check box to use the Open Database 
Connectivity (ODBC) default if you do not want to pass a username 
and password from your <CFQUERY> tag. 


8. (Optional) Input a ColdFusion username and ColdFusion password. 


This is an optional setting, but you can specify a username and pass- 
word to pass to the database if no username or password is specified 
through a ColdFusion <CFQUERY> tag. 


9. (Optional) Enter a descriptive note in the Description text field. 
10. Click the Submit button. 


Your new data source is verified automatically. Look for a confirmation 
message that says OK just below the data source’s title in the main work- 
ing area. 


Your new data source will appear in the Connected Data Sources table at the 
bottom of the page. If the data source was created successfully, the data 
source name should be highlighted in green and the status will be OK. If this 
is not the case, check the top of the page for an error message describing 
what went wrong. 


To use a Microsoft Access database on Windows 98 or Windows Me, you must 
set up an Open Database Connectivity (ODBC) connection with Windows and 
then use the Java Database Connectivity-Open Database Connectivity (JDBC- 
ODBC) driver from within ColdFusion. The Microsoft Access driver and the 
ODBC driver that come with ColdFusion will not work on Windows 98/Me 
because these drivers require services that are not available in Windows 
98/Me. 


Other data source tasks 


In addition to creating data sources, the Administrator is also used to edit, 
verify, and delete existing data sources. Each of these operations is repre- 
sented by an icon in the Connected Data Sources table, which is shown in 
Figure 2-5. 


The following list highlights what each of the data source operations does: 


+ Edit: Brings you to the data source settings page. 


+ Verify: Verifies that the data source is operational and updates the 
Status column. 


+ Delete: Begins the process of removing the data source. 
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Connecting to a Mail Server 


Although ColdFusion is not a mail server, it can connect to an existing mail 
server to provide e-mail services to your Web application. This can be 
exceptionally useful if, for example, you want to send a confirmation e-mail 
to customers when they purchase a product or sign up for a newsletter. 
ColdFusion supports both sending and retrieving e-mail by using the Simple 
Mail Transport Protocol (SMTP) and POP3 protocols, respectively. 


ColdFusion uses a spooled architecture to handle sending e-mails. You may 
be familiar with spooling because it is commonly used for network printers. 
E-mail spooling uses the same concept to manage the sending of e-mail ina 
timely manner. When ColdFusion encounters an e-mail request while build- 
ing a Web page, it sends the request to the spool when it is received. As soon 
as the e-mail is successfully placed on the spool, ColdFusion continues to 
create the output page. The spool sends e-mail messages in the order that 
they were received without holding up the processing of your CFML. Using 
the spool allows ColdFusion to build pages quickly regardless of the speed 
of the e-mail server being used. 
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Use the following steps to set up a connection to an e-mail server: 
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we 
& 


j£ ColdFusion Administrator - Microsoft Internet Explorer 
File Edit View Favorites Tools Help 


1. From the left navigation frame, click the Mail link under the Server 
Settings section. 


The Mail Server Settings page shown in Figure 2-6 appears. 


2. In the Mail Server text field, enter the IP address or the fully qualified 
domain name (usually mail .yourdomain.com, for example) of your 


mail server. 


3. Enable the Verify Mail Server Connection option by selecting its 


check box. 


When this option is enabled, the Administrator attempts to connect to 
the mail server when you click the Submit Changes button. If a connec- 
tion cannot be established, you receive an error at the top of the page. 
You also get a message if the verification succeeded. 


4. Enter the port that the mail server uses in the Server Port text field. 


Normally, mail servers use port 25, which is the default value. 


5. Keep the Maintain Connection to Mail Server check box selected. 
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Mall Spool Senings 


Spool Interval (seconds) 
‘Specify the time tha mail spoclar waits to process spooled mail. 
Spool mail messages for delivery 

‘Select this check box to spool mass 
the mail eaooler attempts 10 deliver s 





lelwery by the mail spooler (racommandad). Whan not selected, 
during page processing 
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6. In the Spool Interval text field, enter a length of time in seconds. 


The spool interval determines how often the messages on the spool will 
be sent to the mail server. The default value of 15 seconds (which can be 
left as-is) attempts to empty the spool four times a minute. 


7. Keep the Spool Mail Messages for Delivery option selected. 


This ensures that your e-mail messages are saved on your hard drive 
while waiting to be sent, saving your server memory space. 


8. Leave the Mail Logging Settings and Mail Charset settings alone. 


By default, ColdFusion does not log all the outbound mail messages. 
This is a matter of size — depending on how many messages you’re 
sending, the log file could get large in a hurry. So, for now it’s best to 
keep that option unchecked. ColdFusion also defaults to the UTF-8 char- 
acter set for mail, and that’s the one you’re going to want to use, so 
there is no need to change that setting either. 


9. Click the Submit Changes button to set up your e-mail server. 


Be sure that the gray bars enclosing the button turn green, signifying 
success. If they turn red, look for an error message at the top of the 
page. 


Even if you validate your mail server, it’s a good idea to send a test message 
from your Web application. A valid connection to the mail server does not 
guarantee that the Web application will send e-mail properly. If you try send- 
ing mail to yourself and it’s not successful, you’ll know because you never 
got the message. 


Controlling Logging on Vour Site 


Basic logging is set up automatically when you install ColdFusion. The logs 
created by ColdFusion Server give the human administrator information about 
how well the server is handling its many tasks. Log entries are grouped 
together by type into separate log files. 


Two tasks are related to log files: Logging Settings and Log Files. You see 
these two task items under the Debugging and Logging heading in the list 
along the left-hand side of the Administrator page. The Logging Settings task 
allows you to customize the following: 

+ Control where logs are stored 

+ Specify how big a log can get before it is archived 

+ Control how many archives should be kept 


+ Specify what sort of information is logged 
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To view the actual log entries, click the Log Files hyperlink in the left naviga- 
tion frame. This will present a list of all of the logs on the server. Table 2-2 
describes the most common log files. 





Table 2-2 Common Log Files and Their Contents 


Filename Description of Contents 





application.log All errors that are reported to the end user 





mail.log Errors that are generated by the SMTP mail server 





server.log Internal server errors that are generated by ColdFusion 





You can view any log by clicking the Action button with the magnifying glass 
or just by clicking its name. These buttons are in the Actions area of the Log 
Files page. The following four actions are available: 


+ View: Displays the contents of the log in the browser. 
+ Download: Downloads the raw log file. 
+ Archive: Creates a numbered copy of the log and clears the current log. 


+ Delete: Removes the log. A new one may be created by the server as 


needed. 
Book VII 


When you create an archive with the archive button, the log file is renamed. ee 


The new name is just the old name with a digit at the end (1 if it is the first 
archive, 2 if it is the second, and so on). The important thing to note is that 
archive files do not show up on the Log Files page. 
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Debugging Options for Building Vour Site 


During the development of your Web application, you will most likely 
encounter errors. Some errors are quickly fixed, yet others require checking 
your CFML line by line to find the source. This process of hunting down and 
fixing errors is called debugging. 


ColdFusion can help you with the debugging process by including debugging 
data at the bottom of each page that it generates. Although there are a 
number of subtle options, here are the most important settings to consider: 


+ Exceptions (Server Errors): Errors that occurred when your ColdFusion 
page made a request to the server. 


+ Execution times for each page template: How long it takes all the code 
on a page to be read and then processed. 
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+ SQL Queries and Stored Procedures: The actual queries that are made 
to the server. This shows you how many queries were made as well as 
what the specific queries were. 


+ Page Variables: Shows all the page variables that are active for a given 
page. You can select from the nine different variable types (cookies, 
application, and so on). 


To enable debugging, simply select the Enable Debugging check box on the 
Debugging Settings page. Click the Debugging IP Addresses page to select 
which desktop PCs, by IP number, are sent the debugging info. If you leave it 
blank, the information is sent to all PCs that view the pages. 


If you’re using Internet Explorer 4 (or above) or Netscape Navigator 6 (or 
above), check out the dockable debugging window. Just select dockable. 
cfm from the Select Debugging Output Format drop-down list on the 
Debugging Settings page. This option puts all the debugging info into a 
Dynamic HTML (DHTML) collapsible tree (much like Windows Explorer), 
which can be displayed in a pop-up window or in a frame right alongside 
your CFML pages. 


Chapter 3: ColdFusion MX 7 
Developer Edition Basics 


In This Chapter 


Exploring ColdFusion architecture 
Working with the application server 
Understanding the power of CFML tags 
Calling functions 

Using variables 


Building expressions 


oldFusion is an application development suite that helps you create 
Web applications quickly and easily. When you use ColdFusion, you’re 
actually using several tools in concert: 


+ An application server: This software processes requests from a 
ColdFusion file and returns HyperText Markup Language (HTML) to the 
end user’s browser. 


+ An editing tool: This tool allows you to create and edit your own sites 
by using the ColdFusion development language. The scripting language 
is described in more detail in Book VII, Chapter 4. 


+ An administration tool: This tool can be used to manage various ele- 
ments of your application, including data sources, mail servers, and 
logs. You can read more about the ColdFusion Administrator in Book 
VII, Chapter 2. 


Together, these three items provide developers with a powerful suite of 
tools to create custom HTML based on user input and other data for every 
site visitor. 


On its own, a Web server can only read files and deliver them to the 
browser. In order to rapidly build a robust Web application, the ColdFusion 
Application Server makes use of the ColdFusion Markup Language (CFML). 
CFML uses tags that are very similar in structure to HTML tags (such as 
<HTML>, <BODY>, and <TABLE>), and functions to provide simple yet pow- 
erful tools to instruct the ColdFusion Application Server. The combination 
of CFML and the application server give you, the ColdFusion developer, the 
ability to provide the end user with a wide array of features, including 


13 6 Understanding the ColdFusion Application Server Model 


+ Database-driven pages 
+ E-commerce functionality 
+ Advanced security 


+ Search engines on your site 


This chapter focuses on the real magic behind ColdFusion — the ColdFusion 
Application Server — and the scripting language used to drive it. Get comfy 
in that computer chair, grab a cup of coffee, and prepare to make your sites 
come alive! 


Understanding the ColdFusion 
Application Server Model 


The World Wide Web is built on a client-server architecture. Both client 
(browser) and server perform specialized tasks, and together they create 
what is known as the Web. The browser’s job is to interface with the user 
and make requests of the server. The server needs to be able to handle 

the user’s request — and possibly thousands of other simultaneous user 
requests — and return the proper response. The Web server may only need 
to read an HTML file to create the response, or it may pass the request on 
to the ColdFusion Application Server for advanced processing. 


The ColdFusion Application Server works in conjunction with a standard 
Web server and can be installed alongside most of today’s popular Web 
servers, including the following: 


+ Microsoft Internet Information Server (IIS) 

+ Netscape Enterprise Server 

+ iPlanet Enterprise Server 

+ Apache Web Server 

+ ColdFusion Internal Web Server 
When the Web server receives a request for a ColdFusion page, which is 
identified by its .cfm or .cfm1 extension, the request is passed on to the 
ColdFusion Application Server. The application server interprets the CFML 
embedded in the page, processes the instructions, and returns the result to 


the Web server, which sends the final response to the end user’s Web 
browser. Figure 3-1 shows how these transactions take place. 


Figure 3-1: 


The 
ColdFusion 
Application 
Server 
model. 
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ColdFusion Markup Language is the language that allows ColdFusion to 
create dynamic Web sites. Most ColdFusion pages contain a mix of CFML 
and HTML; each language has its own uses within the ColdFusion page. 
HTML is commonly used for the following tasks: 

+ Controlling overall page layout 

+ Building tables 

+ Displaying forms 

+ Setting colors and styles 

+ Implementing menus, rollovers, and other advanced browser features 
You can use CFML to make a portion of your page customizable, based on 
user input, in the following ways: 

+ Retrieve and display data from a database 

+ Create dynamic forms 

+ Build complex navigation 


+ Control user sessions (a user’s time visiting the site) and security 
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Getting Acquainted with CFML 


ColdFusion Markup Language is a tag-based language that incorporates 
many of the features found in traditional programming languages, including 
the following: 


+ Functions: Tools in the language that perform specific operations. 


+ Variables: Values that are used in areas of your site that can change, 
depending on condition. 


+ Expressions: Collections of variables, functions, and operators (such as 
+ and &) that are used to generate some specific desired action. 


In the following sections, you find a more detailed introduction to each of 
these concepts, plus some practical examples that you can use to dive right 
into using CFML. 


Introducing CFML tags 


CFML tags are very similar to HTML tags, only more powerful. CFML tags 
instruct the ColdFusion server how to handle the ColdFusion page just as 
HTML tags instruct the browser to display a Web page. In the end, though, 
the CFML is converted into HTML and won't be there when the page is dis- 
played in a browser. 


The format of CFML tags follows a few simple rules: 


+ CFML tags are enclosed in angle brackets (< and >). 
+ CFML tags begin with the letters cf. 


+ CFML tags can come in pairs, meaning that they have a closing tag that 
starts with a slash (/) in addition to their starting tag. Some tags, how- 
ever, are fully self-contained, such as the <CFINLCUDE> and the 
<CFSET> tags. 





+ CFML tags may contain additional modifiers within the tag that allow 
you to specify more information about what the tag should do. 


+ CFML tags are case-insensitive, so <cfoutput> is the same as 
<CFOUTPUT>. 


ColdFusion contains over 100 tags, which enable you to do everything from 
querying a database to making a form. We include the ten most common 
CFML tags in Table 3-1 along with their respective functions. 


Getting Acquainted with CFML 739 

































































Table 3-1 Common CFML Tags 

CFML Tag Function 

<CFINCLUDE> Grabs another file to be included in your page. 

<CFOUTPUT> Outputs content to the screen (both HTML and variables). 

<CFQUERY> Sets up and sends a query to a database. 

<CFLOOP> Loops through a dataset. (Generally, these are generated from a 
<CFQUERY>.) 

<CFSET> Allows you to create a variable and its value. 

<CFIF>, <CFELSE>, The three tags in combination enable you to create conditional oper- 

<CFELSEIF> ations. (For example: /f this, then do that; if not, then do this other 
thing.) 

<CFFORM> Creates a more feature-rich version of the HTML <FORM> tag. 

<CFINSERT> Specifies the database, database table, and content to insert. 

<CFCASE>, Evaluates an expression and then allows you to choose different 

<CFSWITCH> responses based on the value of the expression. 

<CFPARAM> Allows you to test for a given parameter; if it does not exist, you can 





assign a default value and data type for it. 


When the ColdFusion Application Server processes the page, all the CFML 
tags are replaced with the results of the commands that are processed. The 
resulting HTML page should never contain any of your CFML tags. Figure 3-2 
shows the resulting HTML. 


Identifying the role of the pound sign (#) 

The <CFOUTPUT> tag makes special use of the pound sign (#). When a text 
expression is included between two pound signs, it lets the ColdFusion 
Application Server know to look for a value that corresponds to the name of 
the variable within the pound signs. (See Book VII, Chapter 5 for more on 
variables.) For example, if you have a variable named myname and you want 
the value of that variable to be output to the screen, you could use the fol- 
lowing bit of CFML code: 


<CFOUTPUT> Hello, my name is #myname#. </CFOUTPUT> 


The text enclosed by the <CFOUTPUT> tags is unchanged by the server 
unless pound signs surround it. 


In addition to simply looking for variables, ColdFusion can evaluate expres- 
sions within the pound signs, as the example in the next section shows. 
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Figure 3-2: 
CFML gets 
parsed at 
the server 
and 
rendered as 
HTML. 
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If you want to display a pound sign within a <CFOUTPUT> tag, just put two 
pound signs together, and they will be displayed as one. For example, the fol- 
lowing expression prints Dial #0 for an Operator: 





<CFOUTPUT> Dial ##0 for an Operator</CFOUTPUT> 


Putting a tag to work 


Creating a ColdFusion page can be as simple as writing a few lines of code 
that answer the age old question, “What is two plus two?” We created a brief 
example that demonstrates how to answer the question as a ColdFusion 
page. Here’s the code: 


<HTML> 
<HEAD> 
<TITLE>CFML Tags</TITLE> 
</HEAD> 
<BODY> 
<CFOUTPUT>two plus two equals #2+2#</CFOUTPUT> 
</BODY> 
</HTML> 











<P 





Figure 3-3: 
Two plus 
two equals 
four! 
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The preceding sample looks a lot like HTML because most of it is HTML. The 
addition of the CFML tag (<CFOUTPUT>) and a . cfm extension to the file- 
name of the page turns a simple HTML page into a ColdFusion page. Here are 
the steps to create your own .cfm page: 


1. 


Open your favorite HTML text editor. 


Dreamweaver 8 in Code view works well. 


2. Enter the text of the sample CFML page (from the preceding example). 


3. Save your work as four .cfm in a directory running the ColdFusion 


Application Server. 


On IIS in Windows, this is generally C: /inetpub/wwwroot. Check out 
Book VII, Chapter 2 for more information on setting up your ColdFusion 
Application Server. 


. Load the page in your browser. 


If you saved the page in the default location (like wwwroot), the URL 
should be http: //localhost/four.cfm, as shown in Figure 3-3. 





i} CFML Tags - Microsoft Internet Explorer JEg 
Fle Edt Vew Favorites Tods Help p 
O=- © HBA sar Pe raersee Pme E i, JB 

48) http://locathest/four.cfm m> E MP Arit It Coot News 4E) CHO Home -Login X 
Google + m) Search Web + SP Ehh fy. fr rad biked fralOntions E - 








two plus two equals 4 


È) Done 


W Local nvanet 
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Of course, the HTML that is sent to the browser is what’s really important. If 
you view the source of your page while it’s displayed in the browser, you see 
that the <CFOUTPUT> tags have been removed and that the simple addition 
(2+2) between the pound signs has been replaced by the sum. The HTML 
should look like this: 


<HTML> 
<HEAD> 
<TITLE>CFML Tags</TITLE> 
</HEAD> 
<BODY> 
two plus two equals 4 
</BODY> 
</HTML> 























Working with variables 


When you are writing CFML, you may want to store information in memory 
for later use, which is exactly what a variable does. A variable is a named 
container used to temporarily store information. 


Sometimes the value of a variable comes from an external source, such as a 
Web form; other times, you create the variables yourself. In ColdFusion, you 
can use the <CFSET> tag to create a variable. A <CFSET> tag looks like this: 








<CFSET team_name="Pin Pals"> 


This tag sets the value of a variable called team_name to the text string 
"Pin Pals". 


Naming variables 
You can name your variables just about anything you want, but you should 


always follow a few rules: 
+ Variables must consist of letters, numbers, and underscores only. 
+ Variables should not start with a number. 


+ Variables should not contain spaces. 





+ Variables are case-insensitive. (LAST_NAME is the same as last_name.) 


Usually, you want to choose a name that is clear and concise. The name 
should be long enough to fully describe the contents of the variable . . . but 
not so long that it takes too long to type. Table 3-2 summarizes some good 
and bad choices for variable names. ColdFusion also has a set of reserved 
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words that can’t be used for variables, such as anything starting with cf_, 
scope names such as session or form, or CFML script language names. For a 
complete listing of the reserved words, check out the Reserved Words sec- 
tion in the CFML Reference, which can be found by choosing Help™Using 
ColdFusion from within Dreamweaver 8. 




















Table 3-2 Variable Names 

Bad Name Good Name Reason 

add address The name add is too short and 
could be confusing. 

CustomerBilling billAddress1 Long names take longer to type. 

AddressLinel 

x age The name x does not describe the 
value. 

First Name FirstName or Variables cannot have spaces in 

First_Name their names. 





Understanding variable scope 
Each variable used in your ColdFusion pages belongs to a particular scope 


(the area in which the variable exists), as summarized in Table 3-3. The 
scope determines the following: 

+ How the variable was created 

+ How long the variable is available 


+ Where the variable can be used 




















Table 3-3 Common Scope Types 

Scope Description 

Variables The default Variables scope holds user-defined variables 
that are available only on the page where they are created. 

Request The Request scope holds variables that are available to any 
page used during a single HyperText Transfer Protocol (HTTP) 
request. 

Form Variables created in an HTML form are placed in the Form 
scope. 

Cookie End-user browser cookies are made available to ColdFusion in 


the Cookie scope. 





Session The Session scope holds variables that are available to each 
user during a single browser session. 





Application Variables in the Application scope are available to all 
users of the Web application. 
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All variables belong to one scope or another. If you don’t explicitly declare 
the scope (you do this by adding the scope as a prefix to the variable name, 
so a form variable would look like this: FORM. myvariable), the default 
scope, Variables, is used. Two different scopes can contain variables of the 
same name without a problem. Each variable in a scope is held in a separate 
area of the computer’s memory from variables in other scopes. Thus, a vari- 
able named Form. username (created by an HTML form) would not conflict 
with Cookie.username, which is a variable linked to the browser cookie. 


Exploring data types 

Variables can hold a variety of types of information. The type of information 
stored in a variable, which is its data type, determines how ColdFusion evalu- 
ates the variable. A number of variable types are available in ColdFusion, 
and variables can be generated and represented in a variety of ways. All vari- 
able types will fall into one of the following four categories. (These cate- 
gories are explained further in Book VII, Chapter 4.) 


+ Simple: Simple variables hold a single value. You can read and write a 
value directly from a simple variable. Numbers, text strings, dates, and 
Boolean (true/false) values are stored in simple variables. 


+ Complex: Complex variables can hold more than one value. ColdFusion 
arrays and queries are complex variables. Complex variables often hold 
multiple simple variables. For example, a database query might hold a 
list of names and numbers, each of which is a simple value by itself, that 
when combined into a single query become a complex variable. 


+ Binary: The binary data type is used to hold information that is used 
directly by the computer, such as image files. Binary data is usually 
unreadable by humans and requires computer processing to become 
useful. 


+ Objects: Objects are variables that contain data, as well as methods to 
manipulate that data, all wrapped up into a single variable. ColdFusion 
supports several different types of objects, including COM objects, 
ColdFusion components, JavaBeans, and Web Services. 


You don’t need to declare a data type for a variable, but as a practice it’s a 
good idea to do so for more complex variables. 


Using expressions 

An expression is a grouping of variables, constants, operators, and/or func- 
tion calls that can be evaluated by the ColdFusion Application Server to give 
a single value. Simple expressions can be created with a single variable, but 
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others may involve several function calls. The result of an expression can be 
assigned to a variable or used to determine what action a CFML page must 
take. 


The following <CFSET> tag assigns the result of the expression score+10 to 
the variable final_score: 





<CFSET final _score=score+10> 


The preceding expression consists of a variable (score), a constant (10), 
and the addition operator (+). Other expressions might make use of function 
calls. For example, the following expression between the # signs is used by 
the <CFOUTPUT> tag to display the formatted date. It consists of two func- 
tion calls, Now() and DateFormat (), that are called in succession. 


<CFOUTPUT>Today is #DateFormat( Now(), "d/m/yy" 
) #</CFOUTPUT> 
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Chapter 4: Understanding 
CFML Basics 


In This Chapter 


Building a site architecture 

Using page templates 

Controlling the display 

Using databases to generate pages 
 Outputting data 


ou may be surprised by the types of complex Web applications that can 

be built by using basic ColdFusion concepts. You can use templates to 
break each page into smaller segments, which not only helps keep your 
code manageable but also allows you to make quick updates to your site. 
The benefits of your templates can be maximized by storing content in a 
database. The combination of templates and a database can help you build 
large, content-rich sites with just a few ColdFusion pages. 


Setting Up Vour Page Architecture 


Just like how an architect creates blueprints of a building before it’s con- 
structed, a ColdFusion page can — and should — be planned out before it’s 
built. To a Web designer, page architecture deals with how the elements of 
the page lay out graphically. As the Web developer, you need to consider 
how the CFML builds the page as well as the aesthetics of the final output. 


Understanding template basics 


The best way to think of a template is as a snippet of code that gets used 
over and over again for a specific purpose. For example, suppose that a site 
has several hundred products for sale. The product pages all generally look 
the same. Only the product content changes. Rather than make several hun- 
dred pages, all of which would look the same and contain most of the same 
content, you could more easily use one page over and over again to create 
each product page when that specific product is displayed. When you break 
up your site into templates, you do the following: 
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+ Reduce the overall number of pages that you have to manage. 


+ Reduce your maintenance burden because you can make a change to 
one template and have it affect a large number of viewable pages on 
the site. 


Today, most high-traffic sites that have tens of thousands of Web pages, 
such as www.cnn.com or www. yahoo.com, are driven by a surprisingly 
low number of templates. 


Determining just how to break a single ColdFusion Markup Language (CFML) 
page into a series of templates can be more of an art than a science. One of 
the most common ways to break up a page is shown in Figure 4-1. 


The page is broken into four sections, all of which can be different templates: 


+ Header: The area that appears at the very top of the page. 


+ Navigation: The area that includes links to the other pages in the site, 
usually found on the left-hand side of the page. 


+ Content: The area that includes most of the site content, generally 
appearing to the right of the navigation area. 


+ Footer: The area that appears at the bottom of the page and usually 
includes links, privacy information, and copyright information. 
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Each section becomes an individual ColdFusion file and contains a mix of 
HyperText Markup Language (HTML) and CFML. The most important thing 
to remember is that after the page templates are put together, they need to 
equal a properly formatted HTML page, with the correct number of <HEAD>, 
<BODY>, <TABLE>, <TR>, and <TD> tags. 




















It may not seem all that helpful to break one page into four smaller template 
pages, but the ability to reuse a piece of a page as a template gives you a lot of 
options. For example, the footer is usually the same on every page of a Web 
site. This makes it a great candidate to be extracted to a separate template file. 
After you isolate the footer text in its own template file, you can include it in as 
many pages as you like. Then, if you ever need to make a change to the footer, 
you only need to change the footer template file, and the footer will be auto- 
matically updated on all the pages that use the footer template. 


Using <CFINCLUDE> 


The easiest way to build a single HTML page from several templates is with 
the <CFINCLUDE> tag. You can use this tag in any ColdFusion page. Take a 
quick look back at Figure 4-1. To create this page, we might have a page 
called index.cfm, and within it we’d use four <CFINCLUDE> tags to com- 
pose the page. The tag takes the following form: 








<CFINCLUDE TEMPLATE="footer.cfim"> 











The TEMPLATE attribute specifies the name and location of the footer file on 
the ColdFusion server. The footer file, footer .cfm in this example, is also a 
ColdFusion page and can use all the ColdFusion tags, functions, and variables 
that are available in the main page (the page with the <CFINCLUDE> tag). 








The contents of the file footer .cfm could look something like this (a stan- 
dard copyright with a link to a copyright page): 


<I>Copyright 2003, Your Fancy New Company.</I> 
<A href="copy_info.cfm">All rights reserved</A> 


The text of footer .cfm is actually quite simple because it’s used to print 
only a single line on each page. Because this file will be included as part of 
the larger page, it doesn’t need to be a complete HTML page, so you don’t 
need to include <HTML> or <BODY> tags; those are included in the file that 
originated the request for the template, which looks like this: 








<HTML> 
<BODY> 
<!--- body of HTML page here ---> 


<CFINCLUDE TEMPLATE="footer.cfim"> 
</BODY> 
</HTML> 
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Building static include files can save you time when it comes to building and 
maintaining a site, but you can do a whole lot more with them! Each tem- 
plate that’s included in the main page has access to all the variables, func- 
tions, and queries of the main page. This allows you to create a footer that 
uses CFML to generate dynamic output. For more information on how to use 
variables and functions, check out Book VII, Chapter 5. 


Another common way to use the <CFINCLUDE> tag is to isolate database 
queries, user-defined functions, and other CFML templates. When a site is 
controlled by a database, it’s very common to have each page use a query (a 
request to a data source) to retrieve necessary information from the data- 
base. (Queries are described in more detail later in this chapter.) Placing 
queries in included templates has several distinct advantages: 





+ They’re easier to work with during development. If your queries are all 
in a common location and have descriptive terms in the filename 
(qry_getproducts.cfm, for example), finding the right query to build 
a page or edit becomes easier. 


+ They’re easier to find for maintenance. A common development prac- 
tice is to put your queries in a single location. This makes finding the 
right query to work on substantially easier. 


+ They’re easier to protect for security. Again, putting queries in a single 
location external to your main ColdFusion pages makes them harder to 
find for anyone who may try to get access to your databases by stealing 
your queries. 


Using Conditional Processing 


Each ColdFusion Web application can receive information from a variety of 
sources: 

+ User action: A user clicks somewhere on a site. 

+ User submitted forms: A user submits a form from the site. 
+ Database queries: Data is retrieved from a database. 
+ 


The Web application server: ColdFusion keeps information resident in 
the server at all times and makes that information available to CFML. 


+ 


E-mail servers: Yes, ColdFusion can interact with an e-mail server! 


+ 


COM objects, JavaBeans, and Web services: These advanced services 
can all pass information to CFML. For more information on these 
advanced concepts, check out ColdFusion MX For Dummies, by John Paul 
Ashenfelter and Jon Kocen (published by Wiley Publishing, Inc.). 
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The information received from these sources can be of varying degrees of 
importance, and sometimes the information is not in a format that the end 
user can understand. CFML gives you several ways to control the flow of 
your page based on the current set of information. Three of the most useful 
flow control tags are <CFIF>, <CFELSE>, and <CFSWITCH>. 


Using <CFIF> and <CFELSE> 


The <CFIF> tag, which is the most common way to control the flow of a page 
in CFML, is used in CFML in a way that’s very similar to how the word if is 
used in English. 

















The <CFIF> tag is designed to test whether some condition is true or false. 
This is a test expression. Any HTML or CFML between the <CFIF> tag and 
the closing </CFIF> tag is to be evaluated if the test expression is TRUE. 
Often two values in the test expression are compared with each other, as 
you can see in the examples later in this section. Other times, the test 
expression is like those in Table 4-1, which shows some test expressions 
and their meanings. 














Table 4-1 Test Expressions 
Expression Meaning 
Variables.first_ The variable first_name has a value of "Earl". 














name IS "Earl" 








Form.quantity GT 10 The quantity field of the Web form is greater than 10. 








Day( Now() ) is 1 The current day of the month is 1. 





Book VII, Chapter 5 provides more details on how functions and variables — 
like those in Table 4-1 — work together. 


If the expression is true, the code between the <CFIF> tags is processed. If it 
is false, the code is skipped. In the following example, if the quantity in the 
form element is greater than 10 — (GT) is code for greater than — the line 
You qualify for the bulk discount. is displayed on the page: 


<CFIF Form.quantity GT 10> 
You qualify for the bulk discount. 
</CFIF> 








So, what happens if the user inputs a quantity that isn’t greater than 10? In 
this case, nothing is displayed. Suppose, however, that you want to send a 
different message if someone chooses fewer than ten items. In that case, you 
can use the <CFELSE> tag, which allows you to set the alternative condition 
to display if the <CFIF> condition isn’t true. 
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ar 


Take a look at the following code snippet, which shows how you can con- 
struct a <CFELSE> element within your <CFIF> tag (the stuff in between the 
<!--- and the ---> are code comments to help you understand the flow of 
the code): 

















<CFIF Form.quantity GT 10> 

<!--- first option ---> 

You qualify for the bulk discount. 
<CFELSE> 

<!--- second option ---> 

If you buy 10 items, you will qualify for the bulk discount. 
</CFIF> 





You might think of the <CFIF>-<CFELSE>-</CFIF> combination as, “/fthe 
test expression is true, do the first option, or else do the second option.” 
Only one option can happen — the first or the second, but never both. 


Using <CFELSEIF> 


If you need to test more than one condition, you can use <CFELSE> or 
<CFELSEIF> to extend the basic <CFIF> tag. Suppose that you have a Web 
form that asks for the user’s age. The form passes the age information to the 
ColdFusion server processing in a variable, which can be tested before print- 
ing the proper response. The <CFELSEIF> tag allows you to insert more test 
expressions into the logic structure: 

















<CFIF Form.age LT 13> 
<!--- first option ---> 
You are too young to place an order. 
<CFELSEIF Form.age LT 18> 
<!--- second option ---> 
You must have parental permission before ordering. 
<CFELSEIF Form.age GT 59> 














<!--- third option ---> 

You qualify for the Senior Discount. 
<CFELSE> 

<!--- last option ---> 

Thank you for your order. 
</CFIF> 


Again, only a single option will be executed. If the user is under 13, the first 
option will be printed and all the other tags will be skipped. If the user is not 
under 13, the next expression is checked. Each expression is checked, in 
order, until one evaluates to true. Only if none of the expressions are true 
will the <CFELSE> option be run. Note: When one test is met, the following 
conditions are not even checked: There is no need. 














You don’t need to have a <CFELSE> tag, but it’s a good idea to include one 
every time that you use a <CFELSEIF> tag. Even if you don’t think the 
<CFELSE> tag will ever be executed, it can be a useful error-tracking tool. 
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Using <CFSWITCH> 


Sometimes you need to be able to handle a lot of different situations in a 
single page. The <CFSWITCH> tag compares a single test expression with a 
series of cases that are indicated by <CFCASE> tags and then executes the 
one that returns TRUE. Suppose that you need to apply special shipping 
and/or tax rates depending on the state from which an order originates. 
This is a good candidate for the <CFSWITCH> tag because one variable, 
#Form. State#, needs to be compared against a bunch of different state 
abbreviations. 





Here’s how the code could be represented for a selection of states: 


<CFSWITCH EXPRESSION="#Form.State#"> 
<CFCASE value="CA"> 
8% tax for orders within California. 
</CFCASE> 


<CFCASE value="NY"> 
6% tax for orders shipped to New York. 
</CFCASE> 





<CFCASE value="AK,HI"> 
$10 additional shipping for orders shipped to Alaska and Hawaii. 





</CFCASE> 
<CFDEFAULTCASE> Book VII 
Standard shipping rules apply. 
< /CFDEFAULTCASE> Chapter 4 
</CFSWITCH> 


Adding additional cases to the switch tag is as easy, and you can have as 
many as you want. The <CFDEFAULTCASE> tag is usually put at the end, and 
it occurs when none of the other cases are met. Note that you can have more 
than one value, separated by commas, which represents a specific case. 
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As your sites get more complex, you’ll want to focus more on using 
<CFSWITCH> and <CFCASE>. ColdFusion processes these commands more 
quickly than <CFIF> and <CFELSE>, and, as a result, using these will make 
your site run more quickly. 


ar 











Using SOL Queries 


Databases can be a powerful addition to your Web development toolbox. 
Whether you're storing customer information, Web site content, or docu- 
ment metadata (a description of some kind of data), a database gives you a 
way to store, retrieve, and modify your data. For more information on using 
databases with ColdFusion, check out Book VII, Chapter 6. 


15 4 Using SOL Queries 


Many people are familiar with database concepts even if they don’t know it. 
The table structure of a spreadsheet is a lot like a table in a database. Each 
table in a database is given a unique name, and it has columns and rows that 
hold data. All the columns have the same type of information, and each row 
holds a set of information about a particular entity. Table 4-2 shows a sample 
customer database table. Each row corresponds to a different customer and 
each column holds a single kind of data. 

















Table 4-2 A Simple Customer Database Table 

CustomerID Name Address PostalCode 

1 Earl 1 Main St. 94110 
Andrew 14 Evergreen Terrace 06810 
Maggie 97 Rosemont Ave. 94110 


The CustomerID column is an example of an Identity Key. Each time that a 
record is added to the database, the database automatically assigns a 
CustomerID to the new record. The new CustomerID will not be the same as 
any other CustomerID in the database. Having a unique identifier not only 
keeps your database running at optimal speed, but it also helps you manage 
the data. (If you don’t know how to set up a unique key in your database, 
check with a database administrator or check your database documentation.) 





Exploring SOL concepts 

Asking a database to give you information is a query. Database queries use a 
Structured Query Language (SQL). Through queries, you can read, write, and 
modify data in your database. Consider the following SQL query: 








SELECT firstname, lastname FROM Employees 
WHERE lastname='Smith' 





This query has several elements: 


+ SQL elements: These items describe actions, conditions, restrictions, 
and locations. They include the SELECT, FROM, and WHERE clauses. 








+ Columns: In this case, firstname and lastname are columns within a 
table. This is the data that you’re interested in retrieving. 


+ Tables: Here, Employees is a table that includes the columns first- 
name and lastname. 


So, in sum, the query effectively states, “Select the firstname and last- 
name from the Employees table in the database, where the lastname is 
equal to Smith.” 
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Table 4-3 shows some other basic SQL queries and what they do. 






































Table 4-3 Examples of SOL Statements 

Statement Description 

SELECT Name, Address Gets the name and address for all customers 
FROM Customers 

SELECT * FROM Customers Gets all data for customers in the 94110 ZIP code 
WHERE PostalCode = 94110 

DELETE FROM Customer Deletes the customer with a CustomerID 
WHERE CustomerID = 3 equal to 3 

















Entire books are dedicated to SQL, and we can only begin to scratch the sur- 
face here. Macromedia has put a lot of effort into making SQL easy by adding 
query editors to Dreamweaver, so you can get the most out of your database 
without getting bogged down in SQL syntax. For the database tools of 
Dreamweaver to function properly, you need to be sure your database is set 
up properly in the ColdFusion Administrator. (See Book VII, Chapter 2 for 
more information on the ColdFusion Administrator. In addition, check out 
Book VII, Chapter 6 for more about using SQL.) 


Wondering what that asterisk (*) is in that second SQL statement in Table 4-3? 
The asterisk (*) is a wildcard in SQL terminology. If you use a * following a 
SELECT statement, it will retrieve data from all the columns in the table that 
you specify in the FROM clause. 





Pick up a copy of SQL For Dummies, 5th Edition, by Allen G. Taylor (pub- 
lished by Wiley Publishing, Inc.) for an easy-to-understand, comprehensive 
guide to the SQL language. 


Using <CFQUERV> 


ColdFusion has a special tag for running SQL queries: <CFQUERY>. The 
attributes that you specify in the <CFQUERY> tag tell ColdFusion what data- 
base to connect to and how to connect to it. The body of the <CFQUERY> tag 
contains the SQL that you want to run. Some of the important attributes of 
the <CFQUERY> tag are listed in Table 4-4. The basic format for CFQUERY is 
listed here: 





<CFQUERY name="MyQuery" datasource="SomeDatasource"> 
INSERT YOUR SQL HERE 
</CFQUERY> 
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Table 4-4 Common Attributes of the <CFQUERY> Tag 

Attribute Description 

name Required: The name you use to refer to this query in CFML. 

datasource Required: The name used to register the database in the 
ColdFusion Administrator. 

username Optional: Specifies the username used to log on to the data 
source. 

password Optional: Specifies the password used to log on to the data 
source. 

maxRows Optional: Limits the number of rows returned by the query. 

timeout Optional: Gives the time, in seconds, that the ColdFusion server 


should wait for a response from the data source before gener- 
ating an error. 





If all the attributes are set up correctly and the ColdFusion server can con- 
nect and communicate with the data source, the <CFQUERY> tag will provide 
you with a set of data from the data source. All this data will be available to 
you to use in your pages in the form of variables. Check out Book VII, 
Chapter 5 for more information on using variables from queries. 


Using SOL commands 

SQL provides you with a powerful way to get information out of a database. 
SQL is the predominant language for Web development. Although a complete 
primer on SQL is beyond the scope of this book, we want to give you an 
introduction to some of the critical SQL statements that will enable you to 
get data from a database. 


Creating queries with SELECT 

The SELECT keyword is used to retrieve rows of data from a database, and it 
is always the first word in a SELECT statement. Following the SELECT key- 
word is the list of columns that you want to retrieve data from. If you want 
data from all of the columns in a table, use an asterisk (*) instead of specific 
column names. The last required element of a SELECT statement is the 
name of the table FROM which the data is being retrieved. 














Each of the following examples selects a different set of columns from each 
row of the Customers table: 


+ SELECT Name FROM Customers 





+ SELECT CustomerID, Name FROM Customers 














+ SELECT * FROM Customers 
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What if you don’t want data from every row? The WHERE clause is used to 
filter rows from a query. The following examples use the WHERE clause to 
restrict the rows being returned: 








+ SELECT Name FROM Customers WHERE CustomerID = 2 























+ SELECT CustomerID, Name FROM Customers WHERE PostalCode 
> 94000 








With the aid of the WHERE clause, you can build queries that retrieve only 
the information that you need to build your page. While looping through the 
query or outputting directly to the screen, each column can be accessed as a 
variable by using pound signs, such as #name# or #CustomerID#. The use 
of pound signs to output a variable is described in more detail in Book VII, 
Chapter 5. 








If you find that you use <CFIF> to filter the data generated by <CFQUERY>, 
consider modifying the SQL to do the filtering for you. The database will 
probably be able to process the filter faster, plus you won’t need to transfer 
useless information between servers. 


Creating queries with DELETE 

The DELETE keyword is extremely powerful because it can remove all the 
data from a table in one fell swoop. To delete all the rows from a table, 
simply issue the following query, where tablename is the name of the table: 

















DELETE tablename 





Although the above statement will work in Microsoft SQL Server 2000 and 
MySQL, it won’t work in Microsoft Access because Access doesn’t support 
all SQL syntax. It uses a limited version of SQL called Jet SQL. For informa- 
tion on which SQL keywords are supported, check out the Microsoft Access 
Help files. 


More often than not, you’ll only want to delete a limited number of rows... 
or maybe only one row. You can filter the DELETE command by using the 
WHERE clause, as we describe in the previous section. The following exam- 
ples use this technique: 











+ DELETE Customers WHERE CustomerID = 2 




















+ DELETE Customers WHERE PostalCode = 94110 











Your DELETE commands should always have a WHERE clause — this will 
keep you from accidentally deleting important data. Because it’s so easy to 
delete data by mistake, some developers recommend never deleting data at 
all. By adding a status column, you can mark each record as active or inac- 
tive and then do periodic maintenance to remove inactive records by hand. 
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Creating queries with INSERT 


Inserting data into a table is probably the toughest of the basic database 
operations. The elements of the command are similar to the SELECT state- 
ment. After the INSERT keyword, you give the table name followed by a list 
of columns in parentheses. However, unlike a SELECT command, from which 
the database sends you data, now you need to send the data to the data- 
base. The information for the new row is placed at the end of the INSERT 
statement with the VALUES keyword, as in the following example: 


























INSERT INTO Customers( Name, Address, PostalCode ) VALUES 
("Chris", "44 South St.", 06810 ) 


The order of the data after the VALUES keyword must match the order of the 
columns listed before the VALUES keyword. 





If you have a column that is automatically generated, such as an ID column, 
you don’t need to specify a value for that column. 


Creating queries with UPDATE 


Another powerful action is UPDATE. Without a WHERE clause, the UPDATE com- 
mand updates every row in the data table, which is not usually what you want. 
The syntax of the UPDATE command starts off with the UPDATE keyword and 
the name of the data table, just like the INSERT command. However, rather 
than listing the columns and values separately, the value of each column is 
SET individually, as in the following example: 



































UPDATE Customers SET name='Margaret' WHERE CustomerID = 3 





When the UPDATE command is running, the filter is applied first, and then 
the rows are modified. This means that you can modify a column that was 
used in the WHERE clause without affecting the results. The following SQL 
works just fine, changing Customers' name from Maggie to Margaret. 








G1 











UPDATE Customers SET Name='Margaret' WHERE Name = 'Maggie' 





Outputting Content to the Screen 


When you build a page in ColdFusion, you have data from Web forms, data- 
base queries, and other sources stored in variables. Some of these variables 
may hold data that you want to display to your users. The <CFOUTPUT> tag 
gives you the ability to put data from variables into HTML. The <CFOUTPUT> 
tag can print a single value, or it can be used to loop through the data in a 
query, displaying multiple rows of data with just one tag. 
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Using <CFOUTPUT> 


Each <CFOUTPUT> tag must have a closing </CFOUTPUT> tag. Between 
the tags, you can place HTML or CFML. When you place a variable name 
between pound signs (#), <CFOUTPUT> displays the value of the variable 
and not the variable name. 


<CFSET animal="badger"> 

<CFOUTPUT> 

My <I>favorite</I> animal is the <B>#animal#.</B> 
</CFOUTPUT> 











This CFML snippet would print the text: “My favorite animal is the badger.” 


Exactly how you set up the tag is a matter of style. The following example 
prints the same text, but most developers find the nested tags to be less 
clear: 





<CFSET animal="badger"> 
My <I>favorite</I> animal is the 
<B><CFOUTPUT>#animal#.</CFOUTPUT></B> 


Looping 

The <CFOUTPUT> tag can do a lot more than just print a single variable. 
When you specify a query in <CFOUTPUT>, the text between the opening 
and closing tags is repeated for each row of the query, as in the following 
example: 











<CFQUERY name="CustomerData" datasource="CustomerDB"> 
SELECT * FROM Customers 
<CFQUERY> 

<CFOUTPUT query="CustomerData"> 

Customer #CustomerID# is named #name#.<BR> 
</CFOUTPUT> 




















The columns from the query are available inside the <CFOUTPUT>, just like 
ordinary variables. However, every time the <CFOUTPUT> tag loops, a new 
row of data is used, so the values of each column change. If the query 
returned three rows of data, the <CFOUTPUT> tag would loop three times 
and print three lines of text. 
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Chapter 5: Variables, Functions, 
and Structured Data 


In This Chapter 


Working with variables and parameters 
1# Using CFML functions 


Putting data into arrays, lists, and structures 


A fter you’ve gotten your feet wet with the basics of ColdFusion MX 7 
Developer Edition, it won’t be long before you’re itching to add even 
more functionality to your site. This chapter is designed to give you an 
introduction to some of the more advanced concepts in ColdFusion. In real- 
ity, working with variables, parameters, and data structures (collections of 
data in various forms) are concepts that are common to any technology 
platform. This just happens to be Macromedia’s implementation, and as 
you'll soon find out, the folks at Macromedia tried to make it as easy as pos- 
sible to pick up. 


Working with Variables and Parameters 


If you’ve ever logged on to a Web site by entering a username and password, 
you’ve probably seen a URL that looked something like this: 





http: //www.somesite.com/index.cfm?userID=123456 


In that URL string, the userID is called the variable and 123456 is the value 
for that variable. Put simply, a variable is a value that can change depending 
upon differing conditions within your site. In ColdFusion, a parameter can 
represent one of many different data types that are supported in the prod- 
uct, such as variables, queries, arrays, and even dates. 


More often than not, variables are used by developers to change the way a 
Web page looks or responds to a user’s input. In ColdFusion, variables can 
come from a variety of sources and appear in a variety of different formats. 
Variables can be created in ColdFusion in four different ways: 
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+ By using <CFSET> or <CFPARAM> tags 





+ As a result of a database query using a <CFQUERY> tag 
+ Automatically by ColdFusion 
+ From within a <CFSCRIPT> tag 


CFScript is a scripting language that is similar to JavaScript and is available 
to developers from within CFML. Getting into detail about CFScript is beyond 
the scope of this book, but to find out more about it, check out ColdFusion 
MX For Dummies, by John Paul Ashenfelter and Jon Kocen (published by 
Wiley Publishing, Inc.). 


The best reason to use variables in your site is that they expand your ability 
to deliver the right content for the right situation dynamically. In this sec- 
tion, we show you how you can begin to use variables to enhance the user 
experience on your site. For a review of variable type and scope, refer to 
Book VII, Chapter 3. 


In addition to this tutorial and reference, you can also refer to the Using 
ColdFusion Help files, accessible from within Dreamweaver 8 by pressing 
Ctrl+F1. The Help files are an exceptionally good reference tool to under- 
standing both the type and scope of variables. 


Creating Variables with <CFSET> 


The most common way to create a variable in ColdFusion is by using a 
<CFSET> tag. With <CFSET>, you create the name of the variable as well as the 
value (called an expression). The syntax for the <CFSET> tag is as follows: 








<CFSET VariableName = expression> 


ColdFusion is inconsistent in its use of quotation marks as they relate to 
variable values. Although it runs contrary to the help files and the installa- 
tion guides, beginning developers will have fewer problems if they use 
double quotes. 


The following example shows you how you can use <CFSET> with the 
sample ColdFusion databases that come with Macromedia Studio 8 to 
retrieve some information about an employee: 


1. In Dreamweaver 8, verify that you have a connection to the cfbook- 
club database by opening the Application panel and selecting the 
Databases tab. 


To open the Applications panel, choose Window™Databases. You should 
see four default databases, as shown in Figure 5-1. If you can’t see them, 
then you need to configure your database connections. For instructions 
on how to do this, check out Book VII, Chapter 2. 


Figure 5-1: 
You should 
see four 
active 
databases. 
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ar 


Working with Variables and Parameters 763 


Macromedia Dreamweaver § - [Co Inetpub wwwroot Studios list.cim (XHTML) 





File Edit View Insert Modify Text Commands Site Window Help 


Common v RE S4|\FES-4-HEBO B-S 











{--~ <CFLOOP index="Lisctlewenc” éelixiterse":" 1iste"Danon Dean:Andy Comict: Eilen 
Finkelstein"> ---> 

<body> 

<CFLOOP index="Myliav" iiat="Daxon Dean, Andy Cowirs, Ellen Finkelatein"> 








atleast 











v 719x ESTY IKJ i ser 











2. Create a new ColdFusion file by choosing File®>New and selecting 


Dynamic Page and ColdFusion from the Category and Dynamic Page 
columns, respectively. Click Create to create the file. 


. Create a variable called EmployeeNumber and give it a value of 1. 


Constants are the simplest form of variables because there’s no real vari- 
ation in them. In the Code view, your code should look as follows: 


<CFSET ArtistNumber = 1> 


There are a number of rules for the naming of variables. The two most 
important rules are that variables should not start with a number and 
that they cannot contain spaces. For a complete set of variable naming 
rules, check out the Using ColdFusion Help files in Dreamweaver by 
choosing Help™Using ColdFusion, and then choosing Developing 
ColdFusion MX Applications®Using ColdFusion Variables™Creating 
Variables™Variable Naming Rules. 


. Expand the cfcodeexplorer database until you see the artists table. 


You can expand the database to the table level by clicking the plus box 
(+) next to the database and then clicking the plus box next to the tables. 


If you want to see the data in the artists table, right-click the table name 
and choose View Data from the context menu. 
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5. Create a query in the Code view to the cfcodeexplorer database to 
get all information from the Employee table where ARTISTID = 
ArtistNumber. 


Your query should look like this: 





<CFQUERY datasource="cfcodeexplorer" 
name="GetArtists"> 

SELECT * FROM artists 

WHERE ARTISTID=#ArtistNumber# 

</CFQUERY> 











GC 











You'll notice something interesting is happening here. Within the query, 
we've included the ArtistNumber variable. Because ColdFusion reads 
code from the top of the page to the bottom, the server first reads that 
there’s a variable called ArtistNumber and it has a value of 1. Then, 
when it reads this query, it swaps out #ArtistNumber# with the value 
(1) that was previously set for the variable. 


6. Output the data to the screen using a <CFOUTPUT> tag. 


If you want to see what the query returns, you need to include a 
<CFOUTPUT> tag as follows: 


<CFOUTPUT query="GetArtists">#FIRSTNAME# 
#LASTNAME#<BR>#CITY#, &nbsp; #STATE#</CFOUTPUT> 














7. Press F12 to preview the page. 


You should get a look at the personnel information of one Aiden Donolan 
of Denver, CO, as shown in Figure 5-2. 


Testing the existence of variables with <CFPARAM> 


The <CFPARAM> tag is an interesting ColdFusion tag because it checks for 
the existence and type of a local variable on a page. Depending upon 
whether that variable exists and what type of variable it is, ColdFusion either 
creates a new variable, gives it a default value, or generates an error. The 
<CFPARAM> tag has three elements: 


+ name: The name of the variable 


+ type: The data type of the variable, such as a number, string, array, 
query, and so on 


+ default: The default value for a variable 


The structure for the tag is as follows: 





<CFPARAM name="SomeName" type="DataType" default="Value"> 





Figure 5-2: 
Aiden 
Donolan, 
Artist 
Number = 1, 
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The only value that’s required for the <CFPARAM> tag is name. If you use 
only the name, the tag tests for the existence of a variable with that name. If 
it does not exist, ColdFusion returns an error message, as shown in Figure 
5-3, and stops processing. If you include type with the name in the tag, then 
ColdFusion requires both the name and the corresponding data type for the 
variable to exist, or it generates an error. Finally, you can choose to include 
just the name and the default values. In this case, if no variable exists 
when the page is processed, ColdFusion creates the variable with the default 
value you’ve specified. 


Suppose that you’ve got a product page on your corporate site. On this 
product page, you want to be able to show products specific to your various 
target audiences: consumers, educators, and the government. To accomplish 
this, you include a form on the product page that asks users to select 
whether they want to view education or government products. 
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Error Occurred While Processing Request 


The required parameter "SomeName” was not provided. 













This page uses the CFPARAM tag to declare the peremeter 
“SomeName” as required for this template. The parameter is not 
y that y assed or inšialized the 
Tf you wish to set a default value for the 
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parameter y 
tag 


The error occurred in 
C:\Inetpub\wwwroot\testing \paramfailure.ctm: line 7 
5: 


5 : <body> 
<CPPARAM name=" SomeName"> 


dion to verify that you are using the correct 


Figure 5-3: 
This 
variable 
does not 
exist. 

Sd Local nranct 


2) Done 


ados Base to find a solution to your problem. 

















Because a user won’t be choosing a product type until they reach the prod- 
uct page, you can use <CFPARAM> to evaluate whether or not a variable 
exists to show specific product information based on a form input. Here’s a 


simple way to do it: 


1. In Dreamweaver, create a new page called param. cfm and save it 
locally or on a remote testing server (wherever you have the 
ColdFusion server running). 

2. Create a <CFPARAM> variable called type and give it an empty default 
value, as follows: 

<CFPARAM name="type" default=""> 
ay? While it’s not required, it’s always a good idea to scope your variables. 
That way, you’re less likely to run into any errors as ColdFusion looks 
for the right scope for the variable you’re testing. Scoping is also cov- 
ered in more detail in Book VII, Chapter 3. So, in the previous example, if 
you scoped the variable, it would look as follows: 


<CFPARAM name="FORM.type" default=""> 


Adding this tag first is critical, because farther down the page you need 
to look for the variable type. This tag ensures that the variable exists, 
whether or not someone has selected a product type from the drop- 


down list. 


ar 


ar 
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When this exercise is complete, try removing this line to see what hap- 
pens when the variable isn’t defined. ColdFusion will generate an error 
and tell you that the variable isn’t defined when you first load the page. 


3. Create a drop-down list that allows a user to select a product type. 
Here’s a simple version of what that form element looks like: 


<FORM action="param.cfm" method="post"> 
<SELECT name="type"> 
<OPTION value="">Select One</OPTION> 
<OPTION value="consumer">Consumer</OPTION> 
<OPTION value="education">Education</OPTION> 
<OPTION value="government">Government</OPTION> 
</SELECT> 
<INPUT type="submit" value="Go"> 
</FORM> 


























4. Evaluate whether the variable type exists and show the product infor- 
mation based on the variable value. 





The most straightforward way to do this is to use <CFIF> and 
<CFELSEIF>, as shown here: 





<CFIF type is "consumer"> 












































<UL> 

<LI>Consumer Product One</LI> 
<LI>Consumer Product Two</LI> 
</UL> 

<CFELSEIF type is "education"> 
<UL> 

<LI>Education Product One</LI> 
<LI>Education Product Two</LI> 
</UL> 

<CFELSEIF type is "government"> 
<UL> 

<LI>Government Product One</LI> 
<LI>Government Product Two</LI> 
</UL> 

</CFIF> 





Refer to Book VII, Chapter 4 on the variety of ways you can use <CFIF> and 
<CFELSEIF> to evaluate conditional statements. 


You can also use <CFSWITCH> and <CFCASE> for this very same example. 
Indeed, as your applications become more complex, you’ll want to use 
<CFSWITCH> and <CFCASE>, because they process faster, even if <CFIF> 
and <CFELSE> are easier concepts to understand. <CFSWITCH> is covered 
in Book VII, Chapter 4. 
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Getting access to Variables through <CFQUERV> 


Consider the query that we use in the variable example in the “Creating vari- 
ables with <CFSET>” section, earlier in the chapter: 





<CFQUERY datasource="cfcodeexplorer" name="GetArtists"> 
SELECT * FROM artists 

WHERE ARTISTID=#ArtistNumber# 

</CFQUERY>< 
































This query returns information from all the columns in the artists table, 























namely 

+ ADDRESS + ARTISTID 
+ CITY + EMAIL 

+ FAX + FIRSTNAME 
+ LASTNAME + PHONE 

+ POSTALCODE + STATE 

+ THEPASSWORD 


Each of these columns becomes a variable that can be output to the screen 
using a <CFOUTPUT> tag. To use them, surround the column name with 
pound signs (#). So, for example, to output FIRSTNAME, you would use 
#FIRSTNAME#. 





Using Variables generated by ColdFusion 


ColdFusion generates a variety of variables that you can use in your applica- 
tions. These variables work just like variables that you create, and they’re 
called in a similar fashion. For example, if you want to show the operating 
system of the server that ColdFusion is running on, you can use the follow- 
ing resident variable (meaning it’s active in ColdFusion at all times): 


<CFOUTPUT>#Server .OS.Name#</CFOUTPUT> 


For a complete listing of these resident variables that ColdFusion generates, 
check out the CFML reference guide in the Using ColdFusion Help files, 
accessible by pressing Ctrl+F1 within Dreamweaver. 


Using CFML Functions 


Hundreds of different functions are available to ColdFusion developers, and 
they do everything from creating a date to generating random numbers. 
Although there are numerous ColdFusion functions, nearly all of them do 
one of the following four things: 
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+ Create new data and data structures 

+ Evaluate some type of data to determine its existence or format 

+ Evaluate some type of data to produce some new type of data 

+ Change the composition of some type of data 
To give you some idea of the breadth of functions that are available, 
Macromedia puts them into 17 different categories (plus an Other category), 


with many functions being represented in more than one category. We list all 
these categories in Table 5-1 and provide a brief description of the kinds of 


functions found in each group. 





Table 5-1 


Categories of Functions in ColdFusion 





Function Category 


What They’re For 





Array functions 


Creating, evaluating, and manipulating arrays 





Conversion functions 


Converting array, list, XML, and URL information into 
other formats 





Date and time functions 


Creating and formatting dates and times 





Decision functions 


Checking whether various objects are defined or meet 
various criteria 





Display and formatting functions 


Formatting different kinds of data, such as currency, 
decimal formats, and number formats 





Dynamic evaluation functions 


Evaluating different kinds of dynamic data, such as 
Boolean searches or string expressions 





Extensibility functions 


Extending the functionality of ColdFusion to other data 
types, such as XML 





Full-text search functions 


Performing searches in conjunction with ColdFusion’s 
built-in searching tools 





International functions 


Setting, converting, and evaluating currency, time, and 
location for other countries 





List functions 


Testing length, sorting, converting to arrays, and 
appending lists 





Mathematical functions 


Performing advanced calculations on data 





Other functions 


Other functions that don’t fall into any of these categories 





Query functions 


Manipulating and evaluating ColdFusion queries 





Security Functions 


Authenticating users and encrypting content 





String functions 


Containing or manipulating string data 





Structure functions 


Creating, manipulating, and evaluating ColdFusion 
structures 





System functions 


Interacting with or getting information from the server 





XML functions 


Reading and transformation of XML documents 
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Functions can be called in a few different ways: 


+ As part of a CFML tag: An example of this kind of function is IsDefined, 
which checks to see if a variable is defined. The IsDefined function 
looks like this: 


<CFIF IsDefined("SomeVariable")> 








+ As part of defining a variable: An example of this kind of function is 
arrayNew (n), which creates an array (a collection of data) in n dimen- 
sions. The arrayNew function is called from within a <CFSET> tag, as 
follows: 





<CFSET MyArray = arrayNew(1)> 


+ When outputting a variable: An example of this kind of function is 
DateFormat, which enables you to change the way the date looks. 
DateFormat can be called as follows, where date is a variable that 
represents a date: 











#DateFormat (date, "mm-dd-yyyy") # 


+ From within another function: It’s not uncommon that functions sup- 
port calling other functions to provide some value. Take the following 
example: 





<CFSET discountprice = DollarFormat (Evaluate(price - 
(price * discount))) > 


In this case, we are setting a variable discountprice using the 
DollarFormat function, and within that function using the Evaluate 
function to perform some basic arithmetic functions. 








Going through each of the ColdFusion functions is beyond the scope of this 
book, but the following sections show you how to get started with the five 
most useful ColdFusion functions for beginners. 


Using the arrayNew function 

The arrayNew function, as you might expect from the name, creates a new 
array. Arrays, which are collections of data, are a great way to capture 
information and then redisplay it or manipulate it before committing it toa 
database. 


The syntax for arrayNew is as follows: 





<CFSET AnArray = arrayNew(n)> 





Using <CFSET> is the most common way to create an array. AnArray is 
the variable that represents the elements of the array. arrayNew creates 
the array and (n) represents the number of dimensions (dimensions specify 





Figure 5-4: 
The 
arrayNew 
function 
creates an 
array for 
you. 


avr? 
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the structure of the data) of the array. ColdFusion supports up to three- 
dimensional arrays. Figure 5-4 shows a graphical representation of an array 
in ColdFusion. 





Building arrays is covered in more detail in the “Casting Data into Arrays, 
Lists, and Structures” section, later in this chapter. 


Using the isDefined function 

The isDefined function is one of the most popular ColdFusion functions 
because it works so nicely in conditional statements, especially the <CFIF> 
tag. The syntax for the function looks like this: 











<CFIF isDefined("someVariable")> 


This function returns a value of TRUE or FALSE, depending upon whether 
the variable is defined when the page is being processed. In the example 
code above, if the value returned is TRUE, then whatever immediately fol- 
lows that <CFIF> will be executed. If it returns a FALSE value, then the code 
immediately following the <CFIF> will not be executed. 





It’s quite common to use this function for validating and processing forms. 
After the user submits the form, you can use isDefined to ensure that all 
required fields have been filled out. Alternatively, isDefined can be used 
to instigate some action — updating a database, for example — if a value 
exists for the form field submitted. 


Using the len function 


Developers love to use the len (length) function. len is an incredibly simple 
function in that all it does is return the length of a string. Much like isDefined, 
this function becomes exceptionally valuable when doing error handling and 
processing because if you’re looking for a variable that should be of at least 
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some length and len returns a value of zero, you immediately know that the 
user hasn’t filled in the field or made a selection from a menu. Used as part of a 
<CFIF> statement, the syntax for len is as follows: 


<CFIF len(string) is not 0> 


Using the DateFormat function 

Most everybody likes to use dates in their Web sites. The DateFormat func- 
tion in ColdFusion allows you to take a date and format it in a variety of 
ways. To output today’s date in mm-dd-yyyy format, you’d use the following: 





<CFOUTPUT>#dateformat (Now(), "mm-dd-yyyy") #</CFOUTPUT> 


Incidentally, Now() is a related function that provides you with the server’s 
current date and time. You can format the date in a number of different ways 
using month, date, and year. Here are the basics: 


+ d: Day of the month, but single digit days aren’t preceded by a zero (1, 2, 
and 13, for example) 


+ dd: Day of the month, and single digit days are preceded by a zero (01, 
06, and 23, for example) 


+ ddd: A three-letter abbreviation for the day of the week (such as Mon, 
Tue, and Wed) 


+ dddd: The full name of the day of the week 


+ m: Month of the year, but single digit months aren’t preceded by a zero 
(such as 1, 6, and 11) 


+ mm: Month of the year, and single digit months are preceded by a zero 
(01, 04, and 10, for example) 


+ mmm: The month as a three-letter abbreviation (such as Jan, Mar, and Oct) 
+ mmm: The full name of the month 


+ y: The year as last two digits, but only one digit for years ending lower 
than 10 (1, 5, and 23, for example) 


+ yy: The year as last two digits (such as 01, 08, and 98) 


+ yyvy: The year represented by four digits (1998, 2002, and 2014, for 
example) 





Some similar functions to DateFormat are worth checking out in the CFML 
Reference, which you can get to by pressing Ctrl+F1 in Dreamweaver. They 
include TimeFormat, CreateDate, Now, and NumberFormat. 





ar 
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Using the Trim function 


Trim is another exceptionally simple but often used and valuable function. 
Trim removes any leading spaces from either side of data in a string. This is 
most useful, for example, when processing searches from text form fields, 
because you can strip out the spaces in a text field entry like “new homes” 
to create a search string that could look like “newhomes.” Here’s how the 
function looks when used to set a variable that comes from a form: 








<CFSET HomeSearch = trim(form.HomeType) > 


In the preceding example, the HomeType form input will have any leading or 
trailing spaces removed and the resulting input will be assigned to the vari- 
able HomeSearch. 


In addition to Trim, there are also two related functions, Ltrim and Rtrim. 
These functions, as you might expect, remove spacing from the left or the 
right of a string value. 


Casting Data into Arrays, Lists, and Structures 


<e 


In the course of building a dynamic Web site, you will oftentimes find your- 
self looking for different ways to use structured datasets — collections of data 
that fit a predefined structure. These datasets can be used for a variety of 
activities, such as populating form elements, creating name/value pairs for 
things like link-text navigation, or even creating altogether new data struc- 
tures. To help facilitate the use of structured datasets, ColdFusion has three 
different kinds of tools available to developers: 


+ Lists: Lists are simple collections of a number of items. 


+ Arrays: Arrays are sets of structured data that can be like a structured 
list, like a spreadsheet (with rows and columns), or an even more com- 
plex configuration. 


+ Structures: Structures are collections of related data that are put 
together in a virtual container of sorts to make them easier to use. 


This section covers when and how you can add each of these different ele- 
ments to your dynamic Web site. 


All of these data structures support the use of queries to populate them. For 
more information on how to query a database, check out Book VII, Chapter 3. 
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«P 


Creating lists 


Lists allow you to take single sets of structured data and output them to a 
Web page. You can create a list in ColdFusion in two ways: 


+ Using a <CFLOOP> tag 


+ Using the ListAppend function 


Creating a list with <CFLOOP> is the more common method, but here we 
cover both techniques. 


Using <CFLOOP> to run through a list 


To create a simple list using <CFLOOP>, just follow these steps: 


1. Create a <CFLOOP> tag in Code view of your ColdFusion document. 


The tag should look like this: <CFLOOP></CFLOOP>. 


2. Within the <CFLOOP> tag, create a variable using the index parameter. 


Call this variable MyList, which would make the open tag look like 
<CFLOOP index="MyList">. 


. Create your list using the list parameter. 


The list has to be a separated group of values. You use the list parame- 
ter to specify the list. The default item delimiter is a comma. Creating a 
list of some of the contributing authors of this book would look like this: 


<CFLOOP index="ListElement" list="Damon Dean, Andy 
Cowitt"> 





The default delimiter is a comma, but you can use the delimiters 
parameter to specify different delimiters, such as the colon. To create 
the same list as in Step 3 with a colon (:) as a delimiter, just use this 
code: 


<CFLOOP index="ListElement" delimiters=":" 
list="Damon Dean:Andy Cowitt"> 





. To view the list, add a <CFOUTPUT> tag within the <CFLOOP> tags and 


call the variable. 


Figure 5-5 shows the resulting output, and here’s the code: 








<CFLOOP index="MyList" list="Damon Dean, Andy 
Cowitt"> 
<CFOUTPUT>#MyList#<BR></CFOUTPUT></CFLOOP> 








Figure 5-5: 
The authors 
of this book! 
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5. Press F12 to view your list. 


You can also use the results of a query to populate a list using <CFLOOP>. 
Consider the following query of the sample CompanyInfo database: 


<CFQUERY datasource="cfcodeexplorer" name="GetArtists"> 
SELECT firstname FROM artists</CFQUERY> 











Now, if your <CFLOOP> tag looks as follows, you can generate a list of the 
first names of all the company’s employees as a loop: 


<CFLOOP query="GetArtists"> 
<CFOUTPUT>#firstname#<BR></CFOUTPUT> 
</CFLOOP> 





Using ListAppend to create a list 

Creating a list with the ListAppend function is a more advanced and 

dynamic way of creating a list. This quick example shows you how to do it: 
1. Create a variable using <CFSET> and give it the first value of your list. 


You can use the same variables and lists from the previous example: 








<CFSET MyList = "Damon Dean"> 
2. Append the list by using ListAppend and <CFSET>. 


ListAppend asks you to specify the list and then add the new value. So 
the code would look as follows: 


<CFSET MyList = ListAppend(Mylist, "Andy Cowitt") 


3. To output the new list, create an output tag and call the new MyList 
variable. 


Your code should look similar to this: 
<CFOUTPUT>#Mylist#</CFOUPUT> 
4. Press F12 in Dreamweaver to preview your work. 


You should see the names Damon Dean and Andy Cowitt in your Web 
browser. 
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Creating arrays 


Arrays are, very simply, structured datasets. These datasets can exist in n 
number of dimensions. A one-dimensional array looks surprisingly similar to 
a list. A two-dimensional array is akin to a spreadsheet. A three-dimensional 
array (which goes beyond the scope of this book) is, well, complicated, but 
if you can imagine data with height, width and depth, then you’d pretty 
much have the concept. While they’re possible, don’t even ask about four- 
dimensional arrays, in part because they’re really tough to conceptualize, 
and because ColdFusion only supports up to three-dimensional arrays. 


Creating an array 
Creating basic arrays is a fairly straightforward proposition. If you want to 
create an array with some of the jobs related to the creation of this book, 
here’s how you could do it: 

1. Use the ArrayNew function to create an array and give it a dimension. 


To keep things simple, use a one-dimensional array, so the code looks 
like this: 


<CFSET BookJobs= ArrayNew(1) > 





2. Add items to the array using <CFSET>. 


When adding items to the new array, you use the <CFSET> and then the 
array name to first specify the array and then integers enclosed in brack- 
ets to specify to which element in the array you're going to be assigning 
a value. 


If the value is a string, you also need to make sure that the array value is 
enclosed in quotes. If it’s another variable, the quotes aren’t needed. For 
this example, you are using strings, so the code looks like this: 


<CFSET BookJobs[1] = "Writer"> 





3. Fill out the remaining items in your array. 


Add a few more jobs to complete the array. Here’s the remainder of the list: 





<CFSET BookJobs[2] = "Editor"> 

<CFSET BookJobs[3] = "Production Manager"> 
<CFSET BookJobs[4] = "Copywriter"> 

<CFSET BookJobs[5] = "Illustrator"> 











4. Add a <CFDUMP> tag to the bottom of the array and output the array to 
the screen by pressing F12. 





The <CFDUMP> tag outputs variables to the screen, which is exception- 
ally handy for debugging your code. When you add the <CFDUMP> tag, 
you need to specify the variable you want to dump. In this case, the 
code would look as follows: 





<CFDUMP var="#BookJobs#"> 





Figure 5-6: 
Hooray for 
your first 
array! 
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5. Press F12 and you should get a screen that looks a lot like Figure 5-6. 





Be sure to remove the <CFDUMP> tag when you’re finalizing your code, 
otherwise you'll have that lingering output of your array structure. 





If you want to see an individual item in an array, such as the Copywriter posi- 
tion, you would use the following syntax: 


<CFOUTPUT>I was the #BookJobs[4]# for Macromedia Studio 8 
All-in-One Desk Reference For Dummies</CFOUTPUT> 











Using an array 

Now that you’ve created an array, you can do something more with it than 
just dump it to the screen. A common use for one-dimensional arrays is to 
populate lists in form elements. In the following example, you create a drop- 
down list using the elements from an array: 


1. Create a new file entitled array .cfm and include the array informa- 
tion from the previous example in it. 


Figure 5-7 shows what the code and filename should look like on your 
screen in Dreamweaver. We put this in a separate file so that it can be 
made available to other forms on the site that might need the same list, 
and so that if we ever need to update that array we would only need to 
do it in one location. 


2. In a new document, create an include tag to include the array. 








A CFML tag for this very purpose is called <CFINCLUDE>. With the 
<CFINCLUDE> tag, you specify a file that will have its contents swapped 
in for the tag when the page is processed by the ColdFusion server. In 
this case, we call a template, which is just a reference to another file. 
Here’s what it looks like: 








<CFINCLUDE template="inc_array.cfm"> 
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3. Convert the array to a list. 


At present, the array is still just a single comma-separated collection of 
information. Before it can be output to the screen, it needs to be broken 
down into its individual elements. To do this, use a function called 
ArraytoList. With ArraytoList, you can specify an array and a 
delimiter (optional), and the function creates a new variable as a list. 
Here’s the code: 


<CFSET JobsList = ArraytoList (BookJobs, ",")> 
4. Create a form element. 


Now that you’ve got the list settled, you can go about creating the form. 
Here’s some basic code that creates a form element. For the time being, 
leave all the <OPTION> tags out: 


<FORM action="param.cfm" method="post"> 
<SELECT name="job"> 

</SELECT> 

<INPUT type="submit" value="Go"> 
</FORM> 





5. Within the <SELECT> tags, create a <CFLOOP> that takes the list and 
uses the values in option tags for the drop-down list. 





Figure 5-8: 
Asimple 
one- 
dimensional 
array! 
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Here is the resulting code first, followed by an explanation: 


<CFLOOP index="FormOptions" list="#JobsList#"> 
<CFOUTPUT><OPTION value="#FormOptions#" 
>#FormOptions# 
</OPTION></CFOUTPUT> 

</CFLOOP> 





To make this work is a tad bit tricky. First you need to create a <CFLOOP> 
and give the index a name. In this case, call it FormOptions. Then, 

you call the new #JobsList# variable using a <CFOUTPUT> tag to get 
the list elements. Finally, you create a single option tag and use the 
#FormOptions# index value to output the values and names for each 
drop-down list. 


6. To preview your page, press F12. 


Figure 5-8 shows the resulting output. 
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Working with a two-dimensional array 

Two-dimensional arrays give you even more options for adding complex 
datasets to your site without necessarily using a database. To show you 
what we mean, we walk you through how to create a dynamically generated 
text navigation by using a two-dimensional array. 


First, take a look at this array: 

















<CFSET MyTwoDArray = ArrayNew(2)> 

<CFSET MyTwoDArray[1][1] = "Home"> 

<CFSET MyTwoDArray[1][2] = "index.cfm"> 
<CFSET MyTwoDArray[2][1] = "Products"> 
<CFSET MyTwoDArray[2][2] = "products.cfm"> 
<CFSET MyTwoDArray[3][1] = "About Us"> 
<CFSET MyTwoDArray[3][2] = "about.cfm"> 


A couple of things jump out immediately as being different from the previous 
arrays in this chapter: 


+ We designated this array as a two-dimensional array by adding a 2 in the 
parentheses following the ArrayNew function. 
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Figure 5-9: 
Navigation 
bar based 
on an array. 


+ Two sets of numbers are in brackets next to the variable when you’re 
setting the values. Because this is a two-dimensional array, two number 
pairs specify which row things are in (the first number) and which 
column they’re in (the second number). In this case, we’ve made all the 
row-to-column combinations equal, but they don’t need to be that way. 


After you have created this two-dimensional array, you can turn it into a nav- 
igation bar. And here’s some good news: It’s actually easy to do! Just follow 
these steps: 


1. Make sure that you’ve included the previous array in your document. 


2. Create a <CFLOOP> tag with an index of count that starts at one and 
goes to three, and be sure that the <CFLOOP> is enclosed within a 
<CFOUTPUT> tag. 


The code would look like this: 


<CFOUTPUT> 
<CFLOOP index="count" from="1" to="3"></CFLOOP> 
</CFOUTPUT> 


3. Within the <CFLOOP> tags, create a link that references the array files 
within the href and the array names within the link. 


In this step, you’re adding the code that will output both the name of the 
link and the corresponding linked file as the loop is being processed. To 
accomplish this, use the index="count" to pull the appropriate name 
or page by checking the stage of the loop. Note that all the names are in 
the 1 column and all the files are in the 2 column. Here’s the code you 
would need to do it: 


<A href="#MyTwoDArray [count] [2] #">#MyTwoDArray [count] [1] #</A><BR> 
4. Press the F12 key to preview your new page. 


And voila! You should have three links, as shown in Figure 5-9. 





Home 
Products 
About Us 











Using structures 


Structures are an interesting alternative to arrays because they can contain 
any number of different kinds of data. Structures contain discreet elements, 
but they are accessed through names given to the structure. Structures are 
both powerful containers for data and easier to think about than arrays. 





Figure 5-10: 
All about 
Mr. Smith. 
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Here’s a simple example that shows how you can create a structure for 
employee information: 


1. Create the structure with a <CFSET> tag. 


Like an array, there’s a ColdFusion function, called structnew, that you 
use to cast a variable as a structure. The following code creates a new 
structure for employees: 


<CFSET employee= structnew()> 
2. Add some data to the structure. 


For this employee structure, add first name, last name, e-mail address, 
department, and salary, which requires the following code: 


<CFSET employee.firstname = "Bob"> 

<CFSET employee.lastname = "Smith"> 

<CFSET employee.email = "bobsmith@somecompany.com"> 
<CFSET employee.department = "IT"> 

<CFSET employee.salary= "100000"> 





In a structure, the word to the right of the dot (firstname in 
employee. firstname, for example) is called a key, and the combina- 
tion of this key and its corresponding value is called a key/value pair. 
New structure items are added to the employee variable, separated by a 
dot (the same basic syntax that you’d see with form variables, such as 
#FORM. firstname#). 


3. To call the values in a structure, use a <CFOUTPUT> tag and specify the 
value using its key. 


To output this information to the screen, you can use the following code: 


<CFOUTPUT> 

Name: #employee.firstname# #employee.lastname# <BR> 
Email: #employee.email# <BR> 

Department: #employee.department# <BR> 

Salary: #employee.salary# <BR> 

</CFOUTPUT> 














4. Press F12 to preview the page. 


As shown in Figure 5-10, you should see the information about employee 
Mr. Bob Smith. 





Name: Bob Smith 

Email: bobsmith@somecompany.com 
Department. IT 

Salary: 100000 
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You can also cast data from a query into a structure. Imagine that a user 
logged on to your corporate intranet. After the user was authenticated, the 
intranet might make a query like the one we used earlier in this chapter: 





<CFQUERY datasource="cfcodeexplorer" name="GetArtists"> 
SELECT * FROM artists 

WHERE ARTISTID=#ArtistNumber# 

</CFQUERY> 























This would make all the data from the query available as variables that can 
be copied into a structure. 


So, as you can see, structures offer a tremendous amount of flexibility to the 
developer. There are also a number of functions that can allow you to manip- 
ulate the data in a structure. Table 5-2 includes some of these other structure- 
related functions and what they do. 
































Table 5-2 Common Structure Functions 

Function What It Does 

StructNew Creates a new structure 

IsStruct Tests to make sure a variable is in fact a structure 
StructAppend Appends one structure to another 
StructDelete Removes an item from a structure 
StructCount Counts the number of items in a structure 
StructFind Enables you to find values in a structure 
StructKeyList Provides a list of all the keys in a structure 
StructSort Sorts elements within a structure 











Chapter 6: Using Databases with 
ColdFusion MX 7 Developer Edition 


In This Chapter 


Investigating relational databases 
Understanding open database connectivity 
Understanding object linking and embedding 


Creating queries in ColdFusion 


B ook VII, Chapter 4 gives you a brief introduction to some of the basic 
database concepts in ColdFusion. This chapter gives a more in-depth 
look at what it means to build a database-driven Web site, both conceptually 
and practically. This chapter also gives you a more detailed description of 
how you can build a database and add, update, and delete data from that 
database. 


ColdFusion comes with some sample databases, but it isn’t a program that 
you can use to build and maintain a database. To create a database, you 
need a product such as Microsoft Access, Microsoft SQL Server, MySQL, or 
Oracle. 


A number of other interesting tips and tricks are covered in Book VII, 
Chapter 4, such as how to use the WHERE clauses to filter data. Similarly, we 
also show you how to use the SQL functions of INSERT, UPDATE, and 
DELETE in Book VII, Chapter 4. 


<P 





























Understanding Relational Databases 


A traditional database is similar to a spreadsheet, where a collection of 
worksheets makes up the entire spreadsheet, usually called a workbook. 
These worksheets, however, don’t have any real connection to one another, 
except for the fact that they’re all part of the same workbook. A traditional 
database is made up of rows and columns, as shown in Table 6-1, and func- 
tions in much the same fashion as these spreadsheets. Traditional data- 
bases all have a one-to-one relationship between the table and its data, 
which means that each table has its own set of data and that data in one 
table is not connected to the data in any other table. 
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Table 6-1 A Traditional Database Table 

FirstName LastName EmailAddress 

Bob Smith bsmith@somecompany.com 
Robert Williams rwilliams@somecompany.com 
Sarah Kahn skahn@somecompany.com 

Jane Gasteyer jJgasteyer@somecompany.com 





Relational databases have been around since 1970, when E. F. Codd invented 
them at IBM. In a relational database, multiple tables are linked together 
through the use of data that exists in more than one table (this is usually 
referred to as cross-referencing). 


In contrast to a traditional database, a relational database makes a direct 
connection between items in one table and items in another table through 
the use of unique identifiers, or keys. This simple concept opens up a wide 
array of possibilities in database design. 


Here’s a simple example. Table 6-1 shows four people that all work at the 
same company: Some Company. Say that the data sits in the Contacts table. 
You might have another table specifically for addresses of all the companies 
you do business with called Companies. These two tables, in the relational 
style, are shown in Tables 6-2 and 6-3, respectively. 





























Table 6-2 The Contacts Table 

ContactID FirstName LastName EmailAddress 

1 Bob Smith bsmith@somecompany.com 

2 Robert Williams rwilliams@somecompany.com 
3 Sarah Kahn skahn@somecompany.com 

4 Jane Gasteyer jgasteyer@somecompany.com 
Table 6-3 The Companies Table 

CompanylD Organization Address City State Zip 

10 Some Company 1234 Main Street Some City CA 94101 





11 Another Company 22 Minor Way Another City NE 10110 
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To connect the Contacts table to the Companies table, you need to cross- 
reference them somehow. To do this, you can use another table. We call that 
table ContactToCompany, and it includes the data shown in Table 6-4. 

















Table 6-4 The ContactToCompany Table 
ContactID CompanylD 

1 10 

2 10 

3 10 

4 10 





If you look closely at Tables 6-2 and 6-3, you see that Table 6-4 shows that all 
the employees in the Contacts table are now being associated with the same 
address for Some Company through this intermediary table. 


Designing your database using cross-reference tables provides many advan- 
tages, including the following: 


+ You can represent complex many-to-many relationships rather than 
simple one-to-one relationships. 


+ Updating an individual data element can impact a large number of 
related records, as in the case of the address. Updating the address 
automatically updates four other records in the database. 


+ Your databases are more scalable. Relational databases are capable of 
handling data that is more complex and therefore can be used for a 
greater variety of applications. 


The net result of using relational databases is that Web developers have 
been able to build increasingly complex applications based on more 
advanced database designs. But the great part about relational databases is 
that they’re just as applicable to smaller dynamic sites as well. So as you 
begin to think of your first dynamic Web site, challenge yourself to start 
thinking about how you want to collect data about your products and see if 
the relational database model makes sense for you. 


It wouldn’t make sense to walk you through the process of building a rela- 
tional database because ColdFusion is designed to use relational databases, 
not to build them. However, ColdFusion supports the following products that 
you can use to generate your databases: 
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+ Microsoft Access (Windows) 

+ Microsoft SQL Server (Windows) 

+ MySQL (Windows, Mac, Linux, UNIX), an OpenSource database server 

+ Oracle (UNIX, Windows) 
At last check, www. dummies . com has more than 50 books related to data- 
base development. If you plan to use databases heavily for your Web site, 
you should point your browser to www . dummies . com and check some of 


them out! Our favorite is Microsoft SQL Server 2000 For Dummies, by Anthony 
T. Mann (published by Wiley Publishing, Inc.). 


Understanding ODBC and OLE 


Truthfully, you don’t really need to know much about Open Database 
Connectivity (ODBC) or Object Linking and Embedding (OLE) to begin using 
ColdFusion. However, in the interest of clarity, we want you to know what they 
are. Simply put, ODBC and OLE are different protocols that enable the Web 
server to communicate with a database. Specifically, here’s what they mean: 


+ ODBC (Open Database Connectivity): ODBC is the workhorse application 
programming interface (the method for interfacing between your applica- 
tion and a data source) for accessing a database. We call it a workhorse 
because over the past decade, ODBC has become the method of choice 
for interacting with Structured Query Language (SQL) databases. 


+ OLE (Object Linking and Embedding): OLE is the future of desktop 
communication. OLE can talk to a database, much like ODBC, but OLE is 
designed to provide greater integration between your desktop and a 
host of interactive applications that utilize technologies like Microsoft’s 
ActiveX. 


In practical terms, it doesn’t make a whole lot of difference which method 
you use to connect to a database. That being said, most people will agree 
that OLE does provide a faster connection. However, despite the big push by 
Microsoft, most people are still using ODBC as their connection method of 
choice within ColdFusion simply because of its stability and market accept- 
ance. Figure 6-1 shows the ColdFusion Administrator, where you can choose 
your method of database connection. 





Figure 6-1: 
Choose to 
use OLE or 
ODBC to 
connect 
to your 
database. 
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ColdFusion Administrator - Microsoft Internet Explorer 
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Creating Queries in ColdFusion 


Querying a database in ColdFusion is done through different CFML tags, 
depending upon the situation. You use three basic tags to perform database 
operations (there are others, too, but they’re more specialized): 


+ <CFQUERY>: This is the most common query tag, and the one with 
which you will no doubt become exceptionally familiar. <CFQUERY> sup- 
ports the use of SQL (Structured Query Language) and allows you to 
perform a host of SQL database operations, including SELECT, INSERT, 
UPDATE, and DELETE. 


+ <CFINSERT>: CFML includes its only INSERT function through the 
<CFINSERT> tag. You can use either <CFQUERY> or <CFINSERT> to 
insert data into a database. 





+ <CFUPDATE>: Similar to <CFINSERT>, this tag allows you to update 
records in a database. 





The details about using each of these tags are covered in the following 
sections. 
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Using <CFQUERV> 
<CFQUERY> is the workhorse tag in ColdFusion. You use it when you want to 


perform any kind of database operation. The structure of <CFQUERY> is as 
follows: 





<CFQUERY name="somename" datasource="sSomedatabase"> Insert your SQL statement 
here</CFQUERY> 


Within this code, name is the name you assign to the query and datasource 
is a mapped database in ColdFusion and SQL. The SQL within the tags is 
passed directly to the database for execution; the resulting dataset is resident 
in memory while the page is active and then is made available as a series of 
variables that correspond to the columns requested from the database. 





Book VII, Chapter 4 covers <CFQUERY> in more detail, including examples on 
usage and how to output data from queries to the screen. Also check out 
Book VII, Chapter 5 for more information on how to use the variables gener- 
ated from a <CFQUERY>. 


Using <CFINSERT> 


To some degree, <CFINSERT> takes the place of the INSERT SQL function. In 
fact, when you use this tag, all ColdFusion is doing is taking the parameters 
you specify in the tag and turning it into SQL to be executed at the database. 
The basic structure of the <CFINSERT> tag is as follows: 

















<CFINSERT datasource="SomeDatabase " tablename="SomeTable" 
formfields="FormVariablel, FormVariable2, etc. "> 





<CFINSERT> is only valuable when you're doing simple inserts to a database. 
If the queries are more complex and require inputting into more than one 
table, for example, you'll have to use <CFQUERY> and include your SQL there. 


Here’s an example that you can try with the databases that come with 
ColdFusion to show how <CFINSERT> works: 





1. Create a ColdFusion page by pressing Ctrl+N in Dreamweaver, and 
then save the page to your local testing area on your hard drive. 


2. Create two form variables using <CFSET>. 


Usually, these variables would be passed from a form to the page, but 
for this demo, we’re just going to create them here in the page. Here’s 
what the code for these two variables looks like: 


<CFSET form.LASTNAME = "Dean"> 
<CFSET form.CITY= "San Francisco"> 








3. Create a <CFINSERT> tag to put this data into the LASTNAME table in 
the cfcodeexplorer database as follows: 


Figure 6-2: 
cfcode- 
explorer 
comes with 
ColdFusion. 
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<CFINSERT datasource="cfcodeexplorer" 
tablename="artists" formfields="LASTNAME, CITY"> 


The cfcodeexplorer database comes with ColdFusion and is already 
mapped as a datasource (as shown in Figure 6-2), so you don’t have to 
worry about that step. This database also doesn’t need a password, so 
you won't need to include that parameter in your <CFINSERT> tag. 


Now, we’re sure a couple things immediately popped into your head 
when you saw this code snippet. One is that the variables are the same 
name as the columns in the database. To use this tag, you need to map 
the variable name to the table column. For example, if in your form, you 
were capturing last name as simply LAST, you could use a <CFSET> tag 
to convert LAST to LASTNAME as follows: 


<CFSET LASTNAME = form. LAST> 
4. Create an output to see if your update worked. 


You want to check to make sure your update worked, so you should 
create a <CFQUERY> that checks the database to see if the record is 
there. Then, of course, you need to output it to the screen with a 
<CFOUTPUT> tag. Here’s the resulting code: 

<CFQUERY datasource="cfcodeexplorer" name="CheckUpdate"> 


SELECT ARTISTID, LASTNAME, CITY FROM artists WHERE ARTISTID ='#ARTIST#' 
</CFQUERY> 


<CFOUTPUT query="CheckUpdate">#ARTISTID#, #LASTNAME#, #CITY#</CFOUTPUT> 
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ANG 


5. Press F12 to preview your work. 


Using <CFUPDATE> 


<CFUPDATE> is similar in design to the <CFINSERT> tag. The difference is 
that <CFUPDATE> is used to update information in an existing row rather 
than create a new row in a table. It also shares a similar structure, as follows: 














<CFUPDATE datasource="SomeDatabase" 
tablename="SomeTable" 
formfields="UniqueID, UpdateVariable, UpdateVariable"> 


The slight difference here is that you need to select the record that you want 
to update. Take the case of the change we just made to the artists table. The 
output query returned a value of 7 as the ARTISTID. So if we wanted to 
update that record to reflect that Los Angeles was now where this artist was 
located, we'd have to do the following: 








1. Set CITY equal to Los Angeles and ARTISTID equal to 7. 


You'll find it best if you do this in a new ColdFusion page. Here’s what 
the code would look like: 


<CFSET form.ARTISTID= 7> 
<CFSET form.CITY = "Los Angeles"> 











2. Create the <CFUPDATE> tag. 





In this case, we specified ARTISTID so that ColdFusion knows which 
record it’s looking for. We also need to specify the other field to update, 
as well as the database and appropriate table. Here’s the code to update 
the two columns: 

<CFUPDATE datasource="cfcodeexplorer" 


tablename="artist" 
formfields="ARTISTID, CITY"> 


3. Press F12 to update the database. 


After you’ve done this, you can also then run the output query from the pre- 
vious example to see the change. 








<CFUPDATE> is really only good for the most basic of updates to a database. 
If you need to update more than one record at a time, you’re better off using 
<CFQUERY>. 


Chapter 7: Advanced Features in 
ColdFusion MX 7 Developer Edition 


In This Chapter 


Using <CFFORM> 

Working with sessions and cookies 
Sending e-mail 

Creating dynamic graphs 


Creating custom tags 


Ur you’ve got the basics of your site running smoothly, you can 
start taking a closer look at some of the more advanced features in 
ColdFusion. In this chapter, we show you how you can extend the function- 
ality of forms on your site as well as how to keep information available 
throughout the duration of a user’s visit. We also walk you through how to 
send e-mail and make charts, and, finally, provide you with all the informa- 
tion you need to create your own CFML tags. 


Using <CFFORM> 


You may be familiar with HTML forms from Dreamweaver 8. But did you 
know that you can use ColdFusion to check form fields for values? You can 
do precisely that using <CFFORM> and <CFINPUT> tags. Although <CFFORM> 
and <CFINPUT> initially look similar to plain old HTML forms, you can set a 
number of different parameters with ColdFusion forms. These parameters, 
when read by a ColdFusion server, are converted to JavaScript to provide the 
desired functionality. 


Take a look at this brief code snippet: 


<CFFORM action="form.cfm" method="post" name="MyForm"> 

<CFINPUT type="text" name="FirstName" required="yes" message="This is a required 
field"> 

<INPUT type="submit" value="Go"> 

</CFFORM> 
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Figure 7-1: 
An error 
message. 





This is a simple form that looks almost like any other form you’d see 

in an HTML page, except for the addition of required ="yes" and 
message="This is a required field". If you saved this code ina 
page entitled form. cfm, loaded the page on a ColdFusion-enabled server, 
and clicked the Go button without including a value for the field, you’d get 
an error message like the one shown in Figure 7-1. 








AN This is a required field 








If you think the dialog box in Figure 7-1 looks a lot like something you’d see 
coming from JavaScript, well, you’re correct: It is JavaScript! If you view the 
source of the resulting page, you can see what happened. First, the following 
code was added to the head of the document: 


<script type="text/javascript"> 
<l-- 
function _CF_checkMyForm(_CF_this) 
{ 
//reset on submit 
_CF_error_exists = false; 
_CF_error_messages = new Array(); 
_CF_error_fields = new Object(); 
_CF_FirstErrorField = null; 


//form element FirstName required check 
if( !_CF_hasValue(_CF_this['FirstName'], "TEXT", false ) ) 
{ 
_CF_onError(_CF_this, "FirstName", _CF_this['FirstName'].value, "This 
is a required field"); 
_CF_error_exists = true; 


} 


//display error messages and return success 
if( _CF_error_exists ) 
{ 
if( _CF_error_messages.length > 0 ) 
{ 
// show alert() message 
_CF_onErrorAlert (_CF_error_messages) ; 
// set focus to first form error, if the field supports js 
focus(). 
if( _CF_this[_CF_FirstErrorField].type == "text" ) 
{ _CF_this[_CF_FirstErrorField].focus(); } 


} 


return false; 
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}else { 
return true; 
} 
J 
//--> 
</script> 


While there’s a lot of it, all this JavaScript basically does is check to see if the 
text field has a value in it. If it does, great, nothing happens. If it doesn’t, then 
the JavaScript code creates a pop-up warning saying, “This is a required field.” 


The form itself was also changed, as follows: 


<form name="MyForm" action="form.cfm" method="post" onsubmit="return 
_CF_checkMyForm(this) "> 

<input name="FirstName" id="FirstName" type="text" /> 

<INPUT type="submit" value="Go"> 

</form> 


When <CFFORM> was read by the ColdFusion server, it collected all the require- 
ments of all the <CFINPUT> tags and then generated all the JavaScript needed 
for the form validation. Then, it converted the <CFFORM> and <CFINPUT> 

tags to regular HTML form elements. Finally, it added onSubmit="return 
_CF_checkMyForm(this) ", which calls the JavaScript that is doing the 
validation. 





This feature provides you with an easy and fast way to validate your forms on 
the browser before any data is ever submitted, and there are several parame- 
ters that you can set. All of these parameters are set in the <CFINPUT> tag, 
and the most common ones for <CFFORM>, <CFINPUT>, and <CFSELECT> are 
listed in Table 7-1. 











Because this type of form validation uses JavaScript that is read by a user’s 
browser, if a user chooses to turn off JavaScript in his or her browser, this 
type of validation won’t work. 


Form validation done in the manner discussed here is called client-side valida- 
tion. You can also validate forms after the data has been sent to the server; 
this process is called server-side validation. To learn more about server-side 
validation, check out ColdFusion MX For Dummies, by John Paul Ashenfelter 
and Jon Kocen (published by Wiley Publishing, Inc.). 





In addition to <CFINPUT>, <CFSELECT> can also be used to create drop- 
down lists. Check out <CFSELECT> in the CFML Reference in the ColdFusion 
documentation for a good example of how to use <CFSELECT> with a data- 
base query to populate a drop-down list. 
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Table 7-1 Common Parameters for <CFFORM>, <CFINPUT>, and <CFSELECT> 





















































Tag Parameter Description 

<CFFORM>, Name Describes the name of the element. 

<CFINPUT>, 

<CFSELECT> 

<CFFORM> Action Gives the page to execute when the 
form is submitted. 

<CFFORM>, passThrough Allows you to pass through HTML 

<CFSELECT>, code that isn’t supported by 

<CFINPUT> <CFFORM> to the resulting HTML 
form. 

<CFINPUT>, Required Determines whether a value for the 

<CFSELECT> field is required or not. 

<CFINPUT> Validate Verifies the format of a given value. 
There are several formats to choose 
from, including date, eurodate, 
time,float, integer, 
telephone, zipcode, cred- 
itcard, and social_secu- 
rity_number. 

<CFINPUT>, Message Gives a message to display if 

<CFSELECT> validation is unsuccessful. 

<CFSELECT> Query Specifies a query to be used to popu- 














late the list. 





Working with Sessions and Cookies 


Before getting into the “how” of sessions and cookies, it would be good to 
review what both sessions and cookies are and why they can be exceptionally 
useful in Web development. ColdFusion uses two different types of variables: 


+ Persistent: Session variables and cookies are examples of persistent 
variables. These variables are present throughout the user’s time on the 
site and perhaps longer. Session variables are kept in memory, and cook- 
ies can be kept in a text file or in memory on the user’s computer. 


+ Nonpersistent: These variables are present only in a single ColdFusion 
page. By default, all variables are nonpersistent variables. Unless they 
are actively passed from page to page — through a URL string like 

D=10000, for example — these variables will be resi- 

dent only for that single page. 





page.cfm?item!I! 


Persistent variables are great because after they’ve been set, they’re always 
available, and you don’t have to worry about passing them from page to 
page. For things like user IDs, user preferences, contact information, e-mail 


Working with Sessions and Cookies 195 


addresses, and other custom information about a user, persistent variables 
are a perfect way to store that information. The following sections walk you 
through how to generate cookies and use session variables, and point out 
the advantages to each method. 


Using session variables 


Session variables, variables that are resident throughout a user’s time ona 
site, are best used when you have information that you only want to keep 
available while the user’s browser is open and while the user is on your site. 
For example, you may want to use a session variable for things like a user ID 
or user preferences. These are global items in the sense that they’re needed 
throughout the user’s time on the site, as opposed to just one section or 
function of the site. 


Follow these steps to create a session variable: 


1. In the ColdFusion Administrator, make sure that session variables are 
enabled. 


By default, they should be enabled, but it’s always a good idea to check. 

In the ColdFusion Administrator, shown in Figure 7-2, you can find ses- 

sion variables by selecting Memory Variables from the left navigation 

bar under Server Settings. Book VII 


Chapter 7 
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2. In your Application.cfm file, turn on session management. 


You turn on session management by adding a <CFAPPLICATION> 

tag to your application.cfm file. You enable it by setting 
sessionmanagement="yes". You can also specify the timeout (how 
long the cookie is valid for) here by using the sessiontimeout param- 
eter. The code is as follows: 


<CFAPPLICATION NAME="Name of Application" 
SESSTONMANAGEMENT="Yes" 
SESSIONTIMEOUT="#CreateTimeSpan(days, hours, 
minutes, seconds) #"> 



































The values that you choose for days, hours, minutes, and seconds 
are all integers. 


3. Create your session variable. 
Creating a session variable has two components: 


e Set the variable: Setting the variable looks like setting any other type 
of variable, except that the variable name must be preceded by the 
session scope (this is the same scope that we discuss in Book VII, 
Chapter 3) followed by a period, as follows: 


<CFSET session.MySessionVariable = SomeValue> 


e Lock the code: In addition to setting the variable, you also need to 
lock the code. Locking the code simply means that you’re going to 
make sure that the server keeps your request separate from any 
others that may be occurring at the same time. To do this, you use a 
<CFLOCK> tag that encompasses the <CFSET> tag, as follows: 
<CFLOCK scope="SESSION" timeout="20" type="EXCLUSIVE"> 


<CFSET session.MySessionVariable = SomeValue> 
</CFLOCK> 


In this code, scope is where you want the lock to occur, timeout is 
how long you want the session to remain locked, and type is the 
kind of lock you want to perform. Exclusive locks allow one server 
request at a time to read or write shared data, whereas read-only 
locks allow more than one request to read shared data. For more 
information on where you should use exclusive or read-only locks, 
check out the ColdFusion documentation by pressing Ctrl+F1 in 
Dreamweaver. 


4. Include the session scope so that you can call the variable in your 
code when it’s set. 


All session variables need to include the “session.” precursor when 
calling the variable in a <CFOUTPUT> tag, as follows: 


<CFOUTPUT>#session.MySessionVariable#t</CFOUTPUT> 


ANG? 
$ 
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Setting and retrieving cookies 


Cookies are a great way to keep information about a user around for an 
extended period of time so that you can use it when they visit your site a 
multitude of times. Unlike a session, which expires after a given period of 
time, a cookie actually is a text file that resides on a user’s computer. This 
text file usually contains some kind of persistent information about the user, 
such as an e-mail address, site preferences, or perhaps a log of when he or 
she last was on the site. As a developer, the value in being able to retrieve 
this information is to deliver a more targeted, user-friendly application. 


Not everyone likes cookies. Some people view them as intrusive or even 
dangerous because they’re allowing an outside site the ability to write a file 
to their computer. Some people even block cookies. Good Internet etiquette 
requires that you always be judicious when using cookies, and be sure to 
explicitly state in your site’s privacy policy just what you’re using those 
cookies to accomplish. 


Here’s how you can use ColdFusion to add a cookie: 


1. Enable cookies in your application. 


Much like sessions, before you can create a cookie, you first have to 

set up your application to support cookies. This can be done in the 
application.cfm file using the same <CFAPPLICATION> tag that you 
would use to set up sessions. You need the following three tag values to 
be set: 





7 


e CLIENTMANAGEMENT="Yes" 

















e CLIENTSTORAGE="Cookie" 








e SETCLIENTCOOKIES="Yes" 





After these are set, you can get about the business of generating cookies. 


2. On the page on which you want to set a cookie, create a <CFCOOKIE> 
tag and give it a name. 


ColdFusion includes a tag specifically for the writing of cookies. While 
you can use dots (.) in cookie names, be sure to avoid spaces and vague 
names. Here’s an example of a well-named and well-formed cookie: 


<CFCOOKIE name="EmailAddress"> 
3. Assign the cookie a value. 


A cookie value can be just about any kind of string, constant, or variable. 
It cannot, however, include complex values like arrays or structures. For 
example, if your site has a newsletter that requires a user’s e-mail 


Book VII 
Chapter 7 


uonip3 sadojaneg 
L XIN Uolsn4pjoy U! 
sainjea4 paoueapy 


798 Working with Sessions and Cookies 


address, you could include a check box at sign-up that says “Remember 
my e-mail address.” If you set the cookie value to #email#, you could 
retrieve that value when the user returns to the site. The syntax for set- 
ting this value would be as follows: 


<CFCOOKIE name="EmailAddress" value=" #email#"> 
4. Set an expiration date for the cookie. 


Setting the expiration date lets the computer know when to remove the 
cookie from the user’s machine. You can give the expires parameter 
several possible types of values: 


e A specific date (in mm/dd/yy format) 

e A specific number of days into the future (1, 2, 30, and so on) 
e now, which deletes the cookie 

e never, which writes the cookie and never removes it 


If you don’t want this cookie to expire, the syntax for the cookie would 
now look as follows: 


<CFCOOKIE name="EmailAddress" value="#email#" 
expires="never"> 





5. Add additional parameters to the cookie tag. 


You can choose to specify three other pieces of information through this 
tag (check out the CFML reference in Dreamweaver for more detailed 
information on these parameters): 


e Domain: This parameter sets the Internet Domain for which the 
cookie’s content is valid. The domain name must start with a period 
(.) and is a required tag if you use the path parameter. The syntax is 
as follows: domain =".mydomain.com" 


e Path: This parameter limits the validity of a cookie to a specific path 
within a domain. If you use this parameter, the domain parameter is 
also required. The syntax is as follows: path="/newsletters" 


e Secure: This is a simple yes or no flag for the parameter. If yes is 
selected, the cookie will only be set if the site is using Secure Socket 
Layers (SSL). The syntax is as follows: secure="no" 


When the page is processed, the cookie will be set. To check to see if your 
cookie worked locally while you’re testing, check out the local cookies direc- 
tory on your computer, as shown in Figure 7-3. 





Figure 7-3: 
The local 
cookies 
directory. 
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Sending Mail 


If you want to have users sign up for something on your site — a mailing list 
for example — then you’re probably going to want to take advantage of 
ColdFusion’s mail tools. Before we describe how to do it, though, be warned: 
You’re going to need to have access to an e-mail server (SMTP) to take advan- 
tage of this tag, so be sure to check with your Internet service provider and 
make sure that you have this kind of service. 


After you’ve got that squared away, sending mail is a breeze. Check out the 
code snippet in the following example. In it, we create a very simple little 
form that includes first name, last name, and e-mail address, and then with 
the Steps list, we walk you through sending an e-mail. All of this code goes in 
the same file, called mail .cf£m. 


Here’s the initial FORM code: 


<FORM method="post" action="mail.cfm"> 

First Name: &nbsp; &nbsp;<INPUT name="first" type="text" maxlength="60"><BR> 
Last Name:&nbsp; <INPUT name="last" type="text" maxlength="60"><BR> 
Email:&nbsp; <INPUT name="email" type="text" maxlength="60"><BR> 

<INPUT type="submit" value="Send Mail"> 

</FORM> 


To make things simple, we post the request to the same page as the form, as 
indicated by the method="post" and action="mail.cfm” parameters. 
Certainly you could have your send-mail page separate. To create the mail, 
follow these steps: 
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\NG/ 


1. Use <CFPARAM> to check for the existence of the three variables in the 


form and give them default values. 


Because the form and the logic required to send the mail are on the 
same ColdFusion page, you first need to make sure that the variables 
exist. If they don’t, ColdFusion returns an error for the code in the next 
step. This code, placed above the <FORM> tag, checks for the existence 
of the three variables in the form and, if they don’t exist, creates them 
and gives them an empty value. Here’s the code: 

<CFPARAM name="email" default=""> 


<CFPARAM name="first" default=""> 
<CFPARAM name="last" default=""> 











. Create a conditional statement that checks for the existence of the 


variable email. 


You really only need the e-mail address to make this work, so we want to 
make sure that it has a value associated with it. To do this, you can use a 
simple <CFIF> tag to test for the length of the variable email, as shown 
here: 


<CFIF len(first) is NOT 0> 


Place this <CFIF> after the FORM element in your page. If the length of 
the variable email is not 0, you know it must have a value and then you 
can send a message. 


Even though you’ve tested for the existence of the variable, you haven’t 
tested to see whether or not that e-mail address is “well-formed,” mean- 
ing it has an at symbol (@) and a dot (.). As it’s currently structured, if 
we put the word “boo” in the e-mail field, it would try to send mail to 
“boo,” which is of course not a valid e-mail address. 


. Create a <CFMAIL> tag within the <CFIF> tag. 





With <CFMAIL>, you can specify a number of options. (You can press 
Ctrl+F1 to access the ColdFusion reference within Dreamweaver 8 to find 
out more about all the options.) For this message, you only need to be 
concerned about the following set of parameters: 


e to: The address the message is being sent to 


e from: The address you want the message to be shown as coming 
from 


e subject: The subject of the message 
e server: The mail server that’s going to send the message 


For the <CFMAIL> parameters, you can use static values and variables, 
as well as putting the body of the message in between the opening and 
closing tags. 
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For an example message, we use #email# to specify the destination 
address, and then we use #first# and #last# to personalize the 
message by addressing it to the recipient. Finally, we include a small 
note to let the user know the message was sent. Again, this will be part 
of the <CFIF> tag, following the FORM element. The resulting code 
looks like this: 

<CFMAIL to="#email#" from="damon@loungeboy.com" subject="Here's Your 

Message, #first#" server="mail.loungeboy.com">Dear #first# #last#, 
Isn't this mailer the coolest thing! 
</CFMAIL> 


<P style="color: green">Thank you. Your message has been sent to 
<CFOUTPUT>#email#</CFOUTPUT></P> 





4. Move the message to your testing server and try it out by sending 
yourself an e-mail. 


Figure 7-4 shows the e-mail you get in your Inbox. 








— Here's Your Message, Damon - Unicode (UTF-8) JE 
Fie gdt Wew Tools Message Helo ? 
8 & 6 è X 
Reply Reniy A ad Pit Dete  Prewious Next «Addresses 
From:  camon@ioungeboy com 
Date: Wednesday, September 03, 2003 7:35PM 
To: amondeangymndspring com 
Subject: Herra Your Message, Daman 





Dear Damon Dean, 
Isn't this mailer the coolest thing! 





Figure 7-4: 
You've got 
mail! 




















Creating Graphs 


Imagine for a moment that you’re a world-renowned scientist who’s been 
tracking doggie treat consumption for the year 2005. Table 7-2 includes some 
very important information that any dog would be interested in knowing. 
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Table 7-2 Average Doggie Treat Allocation by Month for 2005 
Month Treats Month Treats 
January 54 July 68 
February 74 August 68 
March 30 September 40 
April 25 October 22 
May 20 November 28 
June 69 December 38 





This data is collected from hundreds of different interviews with dog owners 
and has been saved as a table called Summary in a Microsoft Access data- 
base. Now, you want to make this information available on the Internet as 
part of your ongoing search for funding sources. With ColdFusion, you can 
easily generate charts of this information dynamically: 


1. Create a new page to display the charts and save it to the local 
machine where your testing server is located. 


2. Create a query to get the data you want to display graphically. 
The following query can be used to get the doggie treat data: 


<CFQUERY name="TreatSummary" datasource="DoggieTreats"> 
SELECT Month, Treats, SummaryID FROM Summary 

ORDER BY SummaryID 

</CFQUERY> 


Before you can make this query, you need to have a data source set up 
in ColdFusion Administrator. For details on how to do this, refer to Book 
VII, Chapter 2. 


3. Set up the parameters of the chart using <CFCHART>. 


Much like <CFMAIL>, you can set a number of different options to cus- 
tomize the labels, size, color, and overall appearance of your graphs. 
The following code snippet only uses a handful of them. Refer to the 
CFML Reference Guide (press Ctrl+F1 in Dreamweaver) for a complete 
listing of the parameters you can set. Here’s one way to configure your 
chart: 


<CFCHART chartheight="500" chartwidth="700" format="jpg" font="Arial" 
fontsize="10" labelformat="number" show3d="yes"> 


In this snippet, we set the chart to be 700 pixels wide by 500 pixels high, 
set the graph file format to be a JPEG, set the font to Arial, and set the 
font size to 10 pixels. Lastly, we set the label format to a number and 
make the graph 3D. 


WING) 
RY 
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4. Specify the type of chart you want using <CFCHARTSERIES>. 


The <CFCHARTSERIES> tag allows you to define the kind of chart you 
want to display. Again, you can specify a number of different parame- 
ters. If you’re only interested in making this a simple bar chart, your 
code would look as follows: 








<CFCHARTSERIES type="bar"> 











5. Create a <CFLOOP> to create all the <CFCHARTDATA> entries that rep- 
resent the data for the graph. 


The <CFCHARTDATA> tag is used to specify the item/value pairs for the 
data in the graph. (In this example, January is an item and 54 is a value.) 
To create these tags, use a <CFLOOP> to get all the month and treat 
pairs into individual <CFCHARTDATA> tags. Here’s how it looks: 





<CFLOOP query="TreatSummary" startrow="1" endrow="12"> 
<CFCHARTDATA item="#Month#" value="#Treats#"></CFLOOP> 


6. Make sure that all your code is closed out by including close tags for 
all the chart functions. 


The <CFCHART>, <CFCHARTSERIES>, and <CFCHARTDATA> tags require 
closing tags. So, all the chart code together should look as follows: 

















<CFCHART chartheight="500" chartwidth="700" format="jpg" font="Arial" 
fontsize="10" labelformat="number" show3d="yes"> 

<CFCHARTSERIES type="bar"> 

<CFLOOP query="TreatSummary" startrow="1" endrow="12"> 

<CFCHARTDATA item="#Month#" value="#Treats#"></CFLOOP> 

</CFCHARTSERIES> 

</CFCHART> 


7. Press F12 to see the new graph. 


Figure 7-5 shows the rather unglamorous but nonetheless effective 
graph that is generated. 


Although these specific charting tags are a great feature for ColdFusion, cre- 
ating dynamic graphs is definitely slow and a processor hog. You should 
consider carefully whether or not you can live with slow-loading pages to 
have dynamic graphs. 
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Figure 7-5: 
It's not 
glamorous, 
but it works. 
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Building Custom Tags 


As diverse as ColdFusion is, you may find at times that the base set of func- 
tions and tags can’t do exactly what you’d like it to do. In those instances, you 
might consider taking advantage of ColdFusion’s custom tags. In ColdFusion, 
you can create your own CFML tags that are read by the server just like any 
other ColdFusion tag. ColdFusion custom tags can be made up of CFML code 
or from a scripting language such as JavaScript or ColdFusion Script. 


Here’s a good example of a handy custom tag to have around your online store 
that also shows how custom tags work. This tag, called <CF_makediscount>, 
takes a price and a discount and returns the discounted price to the page. 


Here’s how you would create the tag if you were doing it from scratch: 


1. Create a structure for the custom tag. 


Before you begin anything, you have to decide how you want the infor- 
mation to be passed to the custom tag. Your tag should follow the fol- 
lowing conventions: 


e The tag is enclosed by brackets ( < and > ). 
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e The tag begins with CF_ so that ColdFusion recognizes it as a 
custom tag and looks for it in the custom tag directory (usually 
C:\cfusionMX7\customtags on the server). 


e The rest of the name of the tag corresponds to the filename that 
includes the code for the custom tag. So, if your tag is <CF_somename> 
there should be a file called somename. cfm in the ColdFusion custom 
tag directory. 


e Any parameters within the tag are passed as variables to the file that 
contains the tag’s code. Accordingly, <CF_somename name="foo"> 
will pass the value foo to the file somename. cfm. 


In the <CF_makediscount> example, the tag follows this structure: 

<CF_makediscount price='someprice' discount='somediscount '> 
somediscount, by the way, is a decimal value, not a dollar amount. 
. Create a new ColdFusion file called makediscount .cfm. 


This file contains the code that evaluates the price and the discount and 
then returns the resulting discounted price back to the page that’s 
asking for it. 


. Within the makediscount . cfm file, create the code needed to return 
the discounted price. 


Here’s the code required to perform the entire operation: 


<CFIF len(attributes.price) gt 1> 




















<CFSET caller.newprice = DollarFormat 
(Evaluate(price - (price * discount))) > 
<CFELSE> 
<CFSET caller.newprice = ''> 
</CFIF> 


Here’s what’s going on this code: 


e First, it checks to make sure that the tag has in fact passed a value 
by saying that if the length of the variable is greater than 1 — in 
which case something must be there — then the code assumes it’s 
a valid value. If no value exists, then the code sets the variable 
caller.newprice equal to a null value (a null value is an empty 
value) and passes that empty value back to the page that made the 
request to the tag. 


e When these variables have been passed to the page, the simple equa- 
tion of discount price = price - (price * discount) is 
performed. 

e Performing this equation is also part of setting a new variable, 


caller.newprice, which is sent back to the page that made the 
call to the custom tag originally. 
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Figure 7-6: 
Discount 
pricing! 


You may not be familiar with two scopes in the preceding code. The 
attribute scope is used in custom tags to denote the value being passed 
to the custom tag by the calling page. The caller scope sends the value 
from the custom tag back to the original calling page. 


4. Test the tag by giving it values and outputting the return value to the 
screen using <CFOUTPUT>. 


Figure 7-6 shows how this tag works on a Web page. In the page, you see 
places for price, discount, and the resulting discounted price. 
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After you’ve tried this and it’s successful, you’ve built your very first custom 
tag and you’re well on your way to building new tags for all those complex 
functions on your site! 


Chapter 8: Integrating ColdFusion 
MX 7 Developer Edition with Other 
Macromedia Products 


In This Chapter 


Integrating ColdFusion with Dreamweaver 
Integrating ColdFusion with Fireworks 


Integrating ColdFusion with Macromedia Flash 


(Coson can add a tremendous amount of dynamic power to your Web 
applications. Although ColdFusion is no longer a member of the Macro- 
media Studio family, it still has many points of integration with other 
Macromedia products. In this chapter, we provide a brief overview of how 
Macromedia has chosen to integrate ColdFusion 7 Developer Edition with 
Dreamweaver 8, Fireworks 8, and Macromedia Flash 8. 


Integrating ColdFusion with Dreamweaver 


Nowhere is the integration effort more apparent than within Dreamweaver. 
ColdFusion Studio, previously its own stand-alone application, has been fully 
integrated into Dreamweaver. This melding of the products provides develop- 
ers with the best of both worlds: The easy to use, graphical orientation of 
Dreamweaver has been combined with the dynamic development platform of 
ColdFusion. You can now find ColdFusion tools throughout Dreamweaver: 


+ The Insert bar: The Insert bar has three categories that include a wide 
array of ColdFusion tags, functions, and wizardlike tools. These tools 
are covered in more detail in Book II, Chapter 6. 


+ The Application panel: The Application panel allows you to view data 
in databases, generate queries, and even build ColdFusion components 
(bits of code that are encapsulated and made available to all the parts 
of your application). The Applications panel is discussed in depth in 
Book II, Chapter 6. 


+ The Code view: The Code view, which is shown in Figure 8-1, is the 
development interface that users had grown accustomed to using in 
previous versions of HomeSite and ColdFusion Studio. Now, this same 
interface is available directly in Dreamweaver. 
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Figure 8-1: 
The Code 
view in 
Dream- 
weaver 8. 











Macromedia Dreamweaver $ - [C:Inetpul wwwroot Studio’ qrapli.cin (XHTML)'] JA 












File Edit View Insert Modify Text Commands Site Window Help 
ne tm SOSA aE-4-H8SO h-F 








Y Fies = 
Flos CONE 

D studsa [m| Locel view lx] 
ac s@ *0a/(5 


FE) ate- studies (c:\inetpun\weaweet|srudoa) 

























È aray.dm 
E aray2.cm eee z F 
D toii vo"caxt/htal; charset=iss-6859-1" /> 
= gaphcm 
E revtcfm 
@) rosttast.chm 
A ktam mee"Treatsuanerg” datasource-"pogyieTereata"> 
a tzm th; “Tkeatay- Saiweryi0 TAON NINET 
E param.cfm Z SumnazrylD 
E parvefabre.cfm 
a bedsdm 
W erid zdim cherthe fornate"spe" fonte"Arial" fentsize«"™i 
a vafabledm 4 y 

= [IS 

| 16 

a | ia 

= 16 

a2 2 

= 

EIES 

a 

$ > 


E Thie This & a simple variebla cost Dete: [ieg 
> Application 
> Tag Inspector | P Reaits 

















+ The Code panel: The Code panel includes documentation and tools that 
were previously available in ColdFusion Studio and have simply been 
ported to this new interface. 


With all these areas of Dreamweaver that include ColdFusion components, 
you also have access to many ColdFusion features. The following ColdFusion 
features are now fully integrated into Dreamweaver: 


+ Insert variables, functions, and queries: You can insert variables, func- 
tions, and queries through wizards and dialog boxes. You can find the 
tools to insert these objects on the Insert bar. For example, if you select 
the CFML category and click the database icon, you can fill in the blanks 
and create a <CFQUERY> tag to retrieve content from a database. 


+ Work with databases: You can select databases and collect record sets 
from them. To do this, select the Databases tab in the Application panel. 
If you don’t have a site set up, you'll need to configure your Data 
Sources. Don’t worry, Dreamweaver provides a checklist for you to 
follow to do this! You also find more information on how to retrieve data 
from a database in Book II, Chapter 6. 


+ Generate dynamic content: You can generate dynamic content by 
accessing different sources through the Bindings tab on the Application 
panel. You can also set up variables, give them names, and then just 


Figure 8-2: 
Here’s 
where you 
can seta 
connection 
to a remote 
server. 
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drag them right onto your workspace. For more information on how to 
use variables in ColdFusion, check out Book VII, Chapter 5. 


Specify server-side actions: You can specify a variety of server-side 
actions through the Server Behavior tab in the Application panel. 


Set connections to remote servers: You can set connections to remote 
servers using ColdFusion’s RDS (Remote Development Services). To use 
this feature, create a site and specify the RDS connection in the Remote 
Info category of the Site Definition dialog box, as shown in Figure 8-2. To 
bring up the Site Definition dialog box, choose Site®Edit Sites, and then 
from the Edit Sites dialog box, select your Web site’s name and click the 
Edit button. 
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+ Create and add ColdFusion components to your application: Using 


components is beyond the scope of this book. However, ColdFusion MX 
For Dummies, by John Paul Ashenfelter and Jon Kocen (published by 
Wiley Publishing, Inc.), includes hands-on tutorials of how to use compo- 
nents in ColdFusion. 


Link directly to the ColdFusion Administrator: You can link directly 
from Dreamweaver to the ColdFusion Administrator by selecting Modify 
Data Sources in the Database tab of the Application panel. 


Book VII 
Chapter 8 
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Integrating ColdFusion with Fireworks 


+ Change the Dreamweaver interface: You can change the product inter- 
face to look just like ColdFusion Studio or HomeSite. This procedure is 
covered in detail in Book II, Chapter 1. 


For a more detailed analysis of Macromedia’s integration of Dreamweaver 
and ColdFusion, check out Book II, Chapter 6. 


Integrating ColdFusion with Fireworks 


ar 


The integration between Fireworks and Dreamweaver is both extensive and 
well thought out. ColdFusion, however, doesn’t play much of a role at all in 
that integration. In fact, the only place in Fireworks where ColdFusion is 
mentioned at all is in the Export feature. In Fireworks, if you choose File 
Export™Options, you can set the export extension to a .cfm file for 
ColdFusion. 


Be sure to check out the Macromedia Exchange at www.macromedia.com/ 
exchange. Macromedia is always adding new extensions for products, and 
it’s here that you are likely to find any Fireworks-to-ColdFusion tools. 


Integrating ColdFusion with Macromedia Flash 


WING, 
s 


One of the best pieces of product integration in Macromedia Studio is between 
ColdFusion and Macromedia Flash. In the recent versions of Macromedia Flash 
and ColdFusion, Macromedia provided developers with a new way to get 
dynamic data from ColdFusion into the Macromedia Flash interface. This 
method, which involved creating XML in ColdFusion with the dynamic data 
and then calling the file through ActionScript, was a good first step, but it was 
a convoluted way to query a database and it slowed down your Flash movies. 


With the introduction of ColdFusion MX, Macromedia significantly expanded 
its integration efforts in an effort to define Macromedia Flash as an interac- 
tive, Web-compatible display layer that can easily and efficiently communi- 
cate with the business logic through ColdFusion. In other words, Macromedia 
is betting the proverbial farm that developers really want to create dynamic 
sites using Macromedia Flash for the display side and ColdFusion for the 
database side. 


The information that follows is specific to Macromedia Flash 8 Professional. 
Macromedia Flash 8 (no Professional) is currently bundled with Macromedia 
Studio. So, while these features do exist, you’ll need to upgrade to the 
Professional version of Macromedia Flash to take advantage of them. 





«e 


Figure 8-3: 


The Macro- 
media Flash 
Remoting 
service. 
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The result of all this development work can be boiled down to two features: 


+ The Macromedia Flash Remoting service: This service allows you to 
connect directly to an application server, such as ColdFusion, and exe- 
cute server-side ActionScript. 


+ New query support for ActionScript: Now, with server-side ActionScript, 
you can access data in ColdFusion directly using two new functions, called 
CF . query and CF . http, that are functionally akin to the <CFQUERY> and 
<CFHTTP> CFML tags. 


In addition to the Macromedia Flash Remoting service, Macromedia also 
provides another communication server product, the Macromedia Flash 
Communication Server. With this product, Macromedia Flash talks to a com- 
munication server using ActionScript, and the server in turn can communi- 
cate with a ColdFusion server. For more information on these tools, check 
out the Macromedia Flash 8 ActionScript Bible, by Robert Reinhardt and Joey 
Lott (published by Wiley Publishing, Inc.). 


Advanced Macromedia Flash and ColdFusion integration just isn’t easy, 
and it really goes beyond the scope of this book. If you’re looking for a 
good hands-on guide to these new features, check out ColdFusion MX For 
Dummies, by John Paul Ashenfelter and Jon Kocen (also published by 
Wiley Publishing, Inc.). 


Macromedia provides developers with the Designer & Developer Center, a fine 
resource for discovering more about Macromedia products and how to use 
them. You can find the Designer & Developer Center at www. macromedia. 
com/desdev. 


Using the Macromedia Flash Remoting service 

The Macromedia Flash Remoting service enables you to use Macromedia 
Flash to connect directly to an application server, such as ColdFusion, and it 
also offers developers greater access to dynamic content and more advanced 
scripting tools. The basic way in which this interaction takes place between 
the Flash client and the server is shown in Figure 8-3. 
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The following steps outline the process of making the connection to the 
Macromedia Flash Remoting service, both on the ColdFusion and on 
the Macromedia Flash sides: 


1. Make sure that the remoting service is installed and that you have a 
copy of Macromedia Flash 8 Professional installed. 


You can find the installer for the remoting service in the folder 
D:\Flash 8\Extending Flash 8, assuming that D: \ is your 
CD-ROM drive with the Macromedia Studio installation disc in it. 








2. To be able to use the service, you need to include the files NetSevices. 
as and NetDebug.as in your Macromedia Flash ActionScript. 


These two files tell Macromedia Flash how to manage the remote connec- 
tion after it’s been made and to provide the debugging output for the serv- 
ice. NetDebug is optional and really should only be used when you're 
testing your application. Your ActionScript should look as follows: 





#include "NetServices.as" 
#include "NetDebug.as" 








3. Specify the location for the remote service. 


Basically, this just means that you need to tell Macromedia Flash where to 
look to find the ColdFusion application server on the machine where your 
server-side ActionScript resides. Usually, your ColdFusion server (and 
therefore the Remoting Gateway) is located at http://localhost or 
http://localhost: 8500. The code in your Macromedia Flash 
ActionScript should look like the following: 


NetServices.setDefaultGatewayURL("http://localhost/flashservices/gateway ") 


The /flashservices/gateway part is a built-in virtual directory that 
uses ActionScript to connect to the remoting service. 


4. Set the connection. 


When you’re ready, in your ActionScript you need to say, “Open, gate- 
way,” which can be done with the following ActionScript: 


gatewayConnection = NetServices.createGatewayConnection () 
5. Go get your content! 


This is where the approaches to getting content diverge. At this point, 
you can choose to either call a ColdFusion component or a server-side 
ActionScript file. For every service you call, though, you need the follow- 
ing bit of ActionScript: 


Service = gatewayConnnection.getService("Filename", this); 
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Where service is the name of the instance you are invoking, 
gatewayConnection.getService is the function that gets the server- 
side ActionScript file, filename is the name of the ActionScript file 
without the extension, and this represents the current instance of the 
service. 


The Macromedia Web site has a great paper written by Stephen Gilson that 
walks you through a lot of this in more detail. The paper is entitled “Using 
Macromedia Flash Remoting with Macromedia ColdFusion,” and you can find 
it by going to the Designer & Developer Center and selecting Flash Remoting 
from the Development Center’s drop-down list. You can also find this paper 
in the ColdFusion support documentation area of the Macromedia Web site. 


<P 


Working with CF.query and CF.http 


As part of the new server-side ActionScript element of the Macromedia Flash 
Remoting service, Macromedia has developed two new functions that you 
can use to interact with the ColdFusion server without having to learn CFML: 


+ CF.query: CF.query is a server-side ActionScript function that allows 
you to execute ColdFusion queries from within a Flash movie. This func- 
tionality allows developers to execute database-driven applications 
directly from Macromedia Flash through server-side ActionScripts. The 


following syntax shows the arguments that CF . query supports in this Book VII 
version: Chantera 
CF . query 
({ aoe 
datasource: "data source name", 2 = = 
sql:"SQL stmts", I ae 
username: "username", es = 
password: "password", Sis é 
maxrows :number, as 
timeout :milliseconds 
3) 


There are actually two different ways you can express the CF. query 
and CF . http functions. Both are acceptable, and here’s what the other 
method looks like: 





CF.query(datasource, sql); 

CF.query(datasource, sql, maxrows) ; 
CF.query(datasource, sql, username, password); 
CF.query(datasource, sql, username, password, maxrows) ; 


+ CF.http: CF.http is an ActionScript function that allows HTTP, POST, 
and GET methods to be executed from within a Flash movie. CF. http 
provides a gateway through which information can be passed back and 
forth to the ColdFusion server. The following syntax shows the argu- 
ments that CF. http supports in this version: 


CF. http 
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ar 


method:"get or post", 
url:"URL", 

username: "username", 
password: "password", 
resolveurl:"yes or no", 
params:arrayvar, 

path: "path", 
file:"filename" 


3) 


Within Dreamweaver, check out the ColdFusion Help (Using ColdFusion in 
Dreamweaver) for a complete description of how to set up Macromedia 
Flash Remoting and invoking CF. query and CF.http. You can access Using 
ColdFusion in Dreamweaver by pressing Ctrl+F1. 


Understanding the Macromedia Flash 
Communication Server 


The Macromedia Flash Communication Server provides a similar functional- 
ity as Macromedia Flash Remoting; the primary difference between the two 
is in the design. In the Macromedia Flash Communication Server design, 
rather than talking directly to an application server, the Macromedia Flash 
client talks to the Macromedia Flash Communication Server, which in turn 
talks to the ColdFusion server. You can find out more about the Macromedia 
Flash Communication Server in Book IV, Chapter 10. 


If you’re interested in finding out more about how and when to use the 
Macromedia Flash Communication Server, you should check out 
“Macromedia Flash Communication Server: Use Cases and Feature Over-view 
for RichMedia, Messaging, and Collaboration,” a white paper written by 
Jonathan Gay and Sarah Allen, the engineers who built the product. You can 
find this paper in the ColdFusion support documentation area of the 
Macromedia Web site at www.macromedia.com/desdev/mx/flashcom. 


Charting 

The other integration point between ColdFusion and Macromedia Flash is in 
ColdFusion’s charting tools. The default file type for charts generated using 
the <CFCHART> tag is . fla. You can also choose to have the files generated 
as JPEG and PNG files. At present, if you select Macromedia Flash as the 
format, ColdFusion does not animate or otherwise take advantage of Flash 
animation in the generated charts. 


Index 


Symbols and Numbers 





< > (angle brackets), CFML tags, 738 
* (asterisk), wildcard, 755 
# (pound sign) 

CFML tags, 739-740 

surrounding text with, 128 
/ (slash), CFML tags, 738 
// (slashes), comment indicator, 451 
2-up view, 182, 306-308 
3D Rotation tool, 668-669 
4-up view, 182, 306, 308-309 
45-degree lines, 219 


A 





absolute paths, 35 
Access, 21 
access permissions, 541-543 
Accessibility report, 92 
Action feature, 355 
actions. See also ActionScript; specific 
actions. 
advanced, 450-451 
in buttons, 453-456 
comments, 450-451 
event handling, 425, 450 
in frames, 451-453 
movie clip control, 448-451 
sounds, muting, 449 
Timeline control, 449 
Web pages, 450 
Actions option, 487 
Actions panel, 449 
Actions submenu, 488-489 
ActionScript. See also actions. 
for Flash movies, 698-699 
server-side ActionScript, 474 
uses for, 447-448 
writing, 451 


active layers, 402 

ActiveX, inserting, 151-152 

adjusting colors, 254-259 

Administer Website dialog box, 537-539 
Administer Websites option, 490 
administering Web sites. See also 


Contribute 3; maintaining, Web sites. 
access permissions, 541-543 
Administration dialog box, 490 
administrators 

e-mail address, 529-530 
passwords, 530-531 
setting up, 525-529 
connection keys, 558-561 
CPS (Contribute Publishing Services), 

531-532 
file backups, 535-536 
file placement rules, 551-553 
mapping alternative Web site addresses, 

532-533 
mapping to index files, 533-535 
new page defaults, 536-537 
Paragraph Spacing option, 544-545 
permissions, deleting, 537 
roles 

deleting, 538-539 
edit permissions, 543-545 
file access permissions, 541-543 
file deletion permission, 543 
file size limits, 556-558 
folder access permissions, 541-543 
fonts permissions, 546-548 
image editing permissions, 556-558 
page creation permissions, 548-551 
setting up, 538 
settings, editing, 539-540 
settings, general, 540-541 
style permissions, 546-548 
Rollback feature, 535-536 
settings, 490, 537 
shared assets, 553-556 
users, setting up, 537-539 
Web server settings, 532-535 
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administrators 
e-mail address, 529-530 
passwords, 530-531 
setting up, 525-529 
Advanced icon, 128-129 
Al files, exporting, 301 
Alien Skin Eye Candy 4000, 262 
Align panel, 579, 645-646 
aligning 
images, 66 
layers, 115-116 
objects, 385-386, 645-646 
slices, 295 
text, 62, 506, 619 
text along a path, 217 
alpha transparencies, 335 
Always Use Source PNG, 189 
angle brackets (< >), CFML tags, 738 
Animated GIF Web Snap 128 settings, 303 
animated GIFs, 286-289, 312 
animation 
See also Flash 8 
See also movies 
See also Timeline 
See also video 
button symbols, 399 
event handling, 425 
for Flash movies, 696-698 
frame-by-frame, 417-418 
go to specific frame, 424-425 
interactivity. See actions. 
jerky movement, 414 
length, changing, 415 
morphing. See shape tweening. 
motion tweening, 417-422 
onion skinning, 415-416 
playing, 425 
scenes 
adding, 426 
definition, 350 
deleting, 426 
duplicating, 426 
go to, 449 


renaming, 426 
reordering, 426 
Timeline organization, 352 
viewing, 426 
shape tweening, 422-424 
stop playing, 425 
annotations, 87 
Answers panel, 579 
anti-aliasing, 271. See also blurring; 
feathering. 
Application category, 129-130 
Application panel, 124 


application server. See Web application 


server. 
application sites, 13 
Application tier architecture, 712 
approvers, 39 
Arc tool, 668 
arcs, 668 
arrayNew() function, 770-771 
arrays. See also lists; structures. 
creating, 770-771, 776-780 
definition, 773 
two-dimensional, 779-780 
using, 777-779 
Ask When Launching, 189 
Assets panel, 181, 579 
Assets panel, Swatches tab 
adding colors to 
custom colors, 679-680, 685 
preset colors, 683 
exporting color palettes, 684-685 
overview, 681-682 
renaming colors, 683-684 
asterisk (*), wildcard, 755 
audience analysis, 11 
audio, 19, 148. See also sound. 
audio clips, 149-150 
Auto Levels control, 254 
auto shape objects, 181 
Auto Shape Properties panel, 181 
Auto Shapes menu, 222-224 


auto-expanding text boxes, 608, 613-614 


B 





Back button, 485 

background 
colors, 58, 114, 507-508 
images, 58, 114 
music, 150 

baseline shift, 626 

basic fills, 688—689 

best practices 
absolute paths, 35 
approvers, 39 
browser support, 32, 36-37 
code protection, 35-36 
commenting code, 35 
common requirements, 32-33 
concept development, 32 
connection speed, 33 
content generation, 33 
content specialists, 39 
database, selecting, 33 
definition, 31 
deployment, 36-38 
designers, 38 
digital certificates, 36 
download speeds, 37 
dynamic HTML, 33 
feature design, 33 
file extensions, 33 
file sharing, 36 
files, naming conventions, 35 
folder organization, 35 
graphics design, 33 
hackers, protecting against, 35-36 
interface design, 33 
PDA accessibility, 33 
producers, 38 
programmers, 38 
quality assurance, 39 
relative paths, 35 
requirements definition, 32 
screen resolution, 32 
security, 35-36 
site construction, 34-36 
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site design, 33 
soft launch, 38 
style sheets, 33 
team building, 38-39 
team involvement, 39 
technical design, 33 
testing, 36-38 
Web connections, 37 
Web phone accessibility, 33 
Web-safe colors, 32 
bicubic interpolation, 187, 199 
bilinear interpolation, 187, 199 
binding data sources, 133-134 
Bindings tab, 133-134 
bitmap fills, 389 
bitmap images 
See also graphics 
See also illustrations 
See also images 
See also vector images 
editing, 233-234 
erasing, 234 
FreeHand MX illustrations, 649-650 
gradients, 252 
inserting, 230-231 
scaling, 235-238 
selecting, 231-233 
tools, 179-180, 228-230 
tracing, 664-666 
bitmap masks, 271-273 
Bitmap Option, 188 
Bitmap tools, 177, 179-180 
bleed, 590 
blending 
colors. See gradients. 
objects, 279-282 
blending modes, 279-280 
Blur tool, 180, 259-260 
blurring, 259-261, 271. See also anti- 
aliasing; feathering. 
BMP files, exporting, 301 
bold text, 62, 506 
bookmarks, 491 
Bookmarks menu, 491 
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books and publications 
ColdFusion MX For Dummies, 762 


Macromedia Flash 8 ActionScript Bible, 811 


SQL For Dummies, 755 
borders, images, 66 
breaking apart text and objects, 385 
Brightness/Contrast control, 255 
Browse mode, 485-486 
Browser option, 491 
browser support, 32, 36-37, 50 
Browser/Editor panel, 485-487 
browsing Web pages, 485-486, 491 
Brush tool, 228-230 
brushlike effects, 372-373 
Brush-Size Painting Cursors, 188 
bulleted lists, 509 
Burn tool, 180 
burning (darkening) images, 180 
buttons, Studio 8 interface. See specific 
buttons. 
buttons, Web page 
actions, 453-456 
adding to forms, 100-101 
changing state, 146 
events, 454 
Flash, 142-144 
None, 100-101 
Reset Form, 100-101 
rollovers 
advanced, 321-324 
Flash, 142-144 
image swaps, 324-326 
simple, 285-286 
Submit, 100-101 
symbols, 391, 398-400 


C 





Calligraphic Pen tool, 639 
calligraphy, 639 
calling functions, 770 
Cancel Draft option, 489 
canvas 
definition, 263 
magnification, 195-196 


resizing, 201-203 

slicing, 277-278 
Cascading Style Sheets (CSS), 98 
cells, selecting, 47-48, 515-516 
cfapplication button, 128 
cfbreak button, 128 
<CFBREAK> tag, 128 
cfcase button, 128 
<CFCASE> tag, 128 
cfcatch button, 128 
<CFCATCH> tag, 128 
cfchart button, 129 
<CFCHART> tag, 814 
cfcontent button, 128 
cfcookie button, 128 
cfdefaultcase button, 128 
<CFDEFAULTCASE> tag, 128 
cfdirectory button, 129 
cfelse button, 128 
<CFELSE> tag, 128, 751-752 
cfelseif button, 128 
<CFELSEIF> tag, 128, 752 
cferror button, 128 
cffile button, 129 
<CFFORM> tag, 791-794 
CFFORM category, 130 
cfftp button, 129 
cfheader button, 128 
CF .http, 813-814 
cfhttp button, 129 
cfhttpparam button, 129 
cfif button, 128 
<CFIF> tag, 128, 751-752 
cfimport button, 129 
cfinclude button, 128 
<CFINCLUDE> tag, 128, 749-750 
cfindex button, 129 
<CFINPUT> tag, 794 
cfinsert button, 128 
<CFINSERT> tag, 128, 787-790 
cfldap button, 129 
cflocation button, 128 
<CFLOCATION> tag, 128 
cflock button, 128 
<CFLOCK> tag, 128 







































































cfloop button, 128 

<CFLOOP> tag, 128, 774-775 

cfmail button, 129 

CFML (ColdFusion Markup Language). See 

also ColdFusion MX 7; HTML. 
alternatives. See CF . http; CF. query. 
conditional processing, 750-753 
database queries. See SQL queries. 
functions. See functions, CFML. 
tags, summary of, 738-742. See also 
specific tags. 

templates, 747-750 
uses for, 713 
variables. See variables, CFML. 
Web page architecture, 747-750 

CFML category, 127-128 

cfmodule button, 129 

cfobject button, 129 

cfoutput button, 128 

<CFOUTPUT> tag, 128, 739-740, 759 

cfparam button, 128 

<CFPARAM> tag, 764-767 

cfpop button, 129 

CF. query, 813-814 

cfquery button, 127 

<CFQUERY> tag. See also queries. 
accessing variables, 768 
creating, 127 
description, 787 
using, 755-756, 788 

cfscript button, 128 

<CFSCRIPT> tag, 128 

cfsearch button, 129 

<CFSELECT> tag, 794 

cfset button, 128 

<CFSET> tag, 742 

cfswitch button, 128 

<CFSWITCH> tag, 128, 753 

cfthrow button, 128 

<CFTHROW> tag, 128 

cftry button, 128 

<CFTRY> tag, 128 

cfupdate button, 128 

<CFUPDATE> tag, 128, 787, 790 

changes, tracking. See Design Notes. 

character spacing, 208 
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charts and graphs, 129, 814 
check boxes, 458, 460 
Check Browser Support button, 50 
Check In button, 50 
Check Out File(s) button, 50 
checking files in/out, 50, 91, 93. See also 
source control. 
child layers, 120 
Choose button, 486 
Choose File on Website, 491 
circles, 369, 595 
Clear option, 490 
clickable images. See image maps. 
cloaking, 87 
CMYK (Cyan Magenta Yellow Black), 
mixing, 674-675 
CMYK color mode, 340 
code and design views, 50 
Code panel, 124 
code protection, best practices, 35-36 
code validation, 50, 156 
code views, 44, 46-47, 50, 124 
ColdFusion Administrator, 713, 723-726, 
730-733 
ColdFusion Markup Language (CFML). 
See CFML. 
ColdFusion MX 7. See also CFML 
(ColdFusion Markup Language). 
application parameters, 128 
charting, 129 
code generation. See Dreamweaver 8. 
comments, 128 
component calls, 129 
components, 135-136, 712, 720-721 
content tags, 128 
cookies, 128 
creating dynamic elements, 29 
data sources. See also databases. 
binding to, 133-134 
creating, 726-730 
database connections, 130-132 
database queries. See SQL queries. 
directories, 129 
e-mail, 129 
error information, 128 
files, 129 
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ColdFusion MX 7 (continued) 
FTP requests, 129 
headers, creating, 128 
help tutorials, 52 
HTTP requests, 129 
importing tag libraries, 129 
integration with 
Dreamweaver, 167, 807-810 
Fireworks, 810 
Flash, 474, 477, 810-811 
Flash Remoting Service, 811-813 
ISPs, 714 
LDAP access, 129 
modules, specifying, 129 
page encoding, 128 
parameters, creating, 128 
POP servers, 129 
searching, 129 
server behaviors, 135-136 
server variables, 127 
setting up, 714-718 
surrounding text with #, 128 
tags, 127-130 
uses for, 15, 29 
variables, setting, 128 


Web application server, 710, 712, 714-718 


ColdFusion MX 7, user interface 
Application panel, 124 
Bindings tab, 133-134 
cfapplication button, 128 
cfbreak button, 128 
cfcase button, 128 
cfcatch button, 128 
cfchart button, 129 
cfcontent button, 128 
cfcookie button, 128 
cfdefaultcase button, 128 
cfdirectory button, 129 
cfelse button, 128 
cfelseif button, 128 
cferror button, 128 
cffile button, 129 
cfftp button, 129 
cfheader button, 128 


cfhttp button, 129 
cfhttpparam button, 129 
cfif button, 128 
cfimport button, 129 
cfinclude button, 128 
cfindex button, 129 
cfinsert button, 128 
cfldap button, 129 
cflocation button, 128 
cflock button, 128 
cfloop button, 128 
cfmail button, 129 
cfmodule button, 129 
cfobject button, 129 
cfoutput button, 128 
cfparam button, 128 
cfpop button, 129 
cfquery button, 127 
cfscript button, 128 
cfsearch button, 129 
cfset button, 128 
cfswitch button, 128 
cfthrow button, 128 
cftry button, 128 
cfupdate button, 128 
Code panel, 124 
Code view, 124 


ColdFusion Page Encoding button, 128 


Comment button, 128 
Delete Record feature, 130 
Display Record Count feature, 130 
Dynamic Data feature, 129 
Insert bar 
Advanced icon, 128-129 
Application category, 129-130 
CFFORM category, 130 
CFML category, 127-128 
command categories, 126-130 
definition, 124 
features, 126-130 
Flow icon, 128 
Insert Record feature, 130 
Master Detail Page Set feature, 130 
More Tags button, 129 


Recordset feature, 129 
Recordset Paging feature, 130 
Reference tab, 124 
Repeated Region feature, 129 
Show Region feature, 129 
Snippets tab, 124 
Stored Procedure feature, 129 
Surround with # button, 128 
Update Record feature, 130 
User Authentication feature, 130 
XSL Transformation feature, 130 
ColdFusion MX For Dummies, 762 
ColdFusion Page Encoding button, 128 
collaboration. See also Contribute 3; 
teams. 
creating Web pages, 503-504 
Design Notes, 87 
editing Web pages, 502 
previewing your work, 520-521 
publishing Web pages, 520-521 
site connections, 498-501 
tables 
adding data to, 511-512 
cells, selecting, 515-516 
columns, selecting, 515-516 
documents in, 519-520 
Flash movies, 517 
header rows, 514 
images, 516-517 
inserting in Web pages, 510-511 
links, 517-519 
modifying, 512-516 
row height, 515 
rows, selecting, 515-516 
wrapping text, 514 
text, 504-509 
working offline, 521 
collapsing/expanding 
layers, 264, 266 
panels, Fireworks 8, 183-184 
panels, Flash 8, 357 
Site tab, 50 
view of nested layers, 121-122 
views, nested layers, 121-122 
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Color Defaults, 187 
color management. See Mixer tab; 
Swatches tab; System Color Picker. 
color modes 
changing, 340 
CMYK, 340 
RGB, 340 
colors. See also gradients. 
adding, 182 
adding to Swatches tab 
custom colors, 679-680, 685 
preset colors, 683 
adjusting, 254-259 
applying to objects, 678 
Auto Levels control, 254 
background, layers, 114 
background, selecting, 58 
blending. See gradients. 
blurring, 259-261. See also gradients. 
brightness, 255 
Brightness/Contrast control, 255 
contrast, 255 
Convert to Alpha filter, 261-262 
copying, 181 
creating, 386-387 
curve adjustments, 255-256 
Curves control, 255 
defaults, 187, 386 
dithering, 205 
editing, 182 
exporting color palettes, 684-685 
and file size, 206 
fills 
adding to shapes, 227-228, 598-600 
bitmap, 389 
defining, 598-600 
editing, 388-389 
filters, 254 
Find Edges filter, 261-262 
fonts, 211-214 
hexadecimal, 204 
histograms, 258 
hue adjustments, 255, 257-258 
Hue/Saturation control, 255 
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colors (continued) 
Invert control, 255 
level adjustment, 255, 258-259 
Levels control, 255 
lightness adjustments, 255, 257-258 
links, 59 
links, changing on rollover, 139-141 
live effects, 254 
managing, 203-206 
mixing. See Mixer tab; Swatches tab; 
System Color Picker. 
outlines, 410 
painting areas, 181 
palettes 
definition, 304 
exporting, 684-685 
renaming, 683-684 
replacement, 179-180 


saturation adjustments, 255, 257-258 


selecting and applying, 181 
sharpening, 259-261 
solid, creating, 386-387 
solid fills, 181 
strokes, 227 
text, 58, 61, 506-507, 618-619 
text background, 507-508 
tints, 680-681 
transparency, 261-262 
vector images, 226-228 
Web-safe, 204-206, 386 
Colors panel, 182 
Colors tools, 178, 181 
columns 
database, SQL queries, 754 
tables, selecting, 515-516 
text, formatting, 621-622 
Combinable Nested Font Tags report, 
91-92 
combo boxes, 458, 461-462 
command categories, ColdFusion MX 
7, 126-130 
Command menu, 353 
Comment button, 128 


comments 

actions, 450-451 

best practices, 35 

ColdFusion MX 7, 128 

frames, 414 
commerce sites, 13 
component calls, 129 
components, Web pages, 457-465. See also 

symbols; specific components. 

compression, 183, 297 
concept development, best practices, 32 
conceptual content organization, 19 
conditional processing, CFML, 750-753 
Connect to Remote Host button, 50 
connection keys, 498-499, 558-561 
connection speed, best practices, 33 
Connection Wizard, 499-501 
connections, maintaining, 490 
content development 

audio content, 19 

basic steps, 17-18 

choosing content, 18-19 

conceptual organization, 19 

considerations, 11 

document content, 19 

with Flash 8, 348-349 

forms, 19 

functional organization, 20 

graphics content, 19 

grouping by type, 20 

hierarchical organization, 20 

keyword organization, 20 

logical organization, 20 

organizing content, 19-20 

plug-ins, 19 

preparation, 22 

text content, 19 

topical organization, 20 

types of content, 19 

video content, 19 
content generation, best practices, 33 
content specialists, best practices, 39 
content tags, 128 


contrast, 255 
Contribute 3 
versus Dreamweaver 8, 482 
integration with Dreamweaver, 167-169 
mapping alternative Web site addresses, 
532-533 
preferences, setting, 493-496 
site management, 29-30 
user interface 
Actions submenu, 488-489 
Back button, 485 
Bookmarks menu, 491 
Browse mode, 485-486 
Browser/Editor panel, 485-487 
Choose button, 486 
Choose File on Website, 491 
Edit menu, 489-490 
Edit mode, 487 
Edit Page button, 486 
File menu, 487-489 
Format menu, 492 
Forward button, 485 
Go button, 486 
Help menu, 492 
Home Pages button, 486 
How Do I panel, 484-485 
Insert menu, 491 
menus, 487-492 
New Page button, 486 
Pages panel, 483-484 
panels, 482-487 
Refresh button, 485 
Stop button, 485 
Table menu, 492 
View menu, 490-491 
uses for, 14, 29-30, 481-482 
Contribute compatibility, enabling, 88 
Contribute Publishing Services (CPS), 
531-532 
contributors. See collaboration; Contribute 
3; teams. 
Control menu, 353 
Controller toolbar, 576 
Convert to Alpha filter, 261-262 
Convert to Fireworks Objects, 190 
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Convert to Frames, 190 
cookies, 128, 797-799 
copying 
colors, 181 
frames, 415 
layers, 405 
objects, 377 
text, 376-377 
corner points, 223 
CPS (Contribute Publishing Services), 
531-532 
Crop tool, 179 
cropping images, 179, 188 
cross referencing databases, 784 
CSS (Cascading Style Sheets), 98 
CSS Layers, export option, 314 
Current frame, 355 
curve adjustments, 255-256 
curve points, 223 
curves, 223, 372, 382-383 
Curves control, 255 
custom fills, 692 
Cut option, 490 
cutting and pasting 
between Flash 8 and Fireworks 8, 471-472 
objects, 490 
cutting objects, 276-277 


D 





darkening (burning) images, 180 
data collection forms, 466-468 
data sources, ColdFusion MX 7, 130-134. 
See also databases. 
data types, CFML, 744 
Database tier architecture, 712 
databases. See also ColdFusion MX 7. 
Access, 21 
connections, 130-132 
cross referencing, 784 
elements of, 718-719 
flat file, 719 
ODBC (Open Database Connectivity), 
786-787 
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databases (continued) 
OLE (Object Linking and Embedding), 
786-787 
outputting queries to the screen, 758-759 
queries, 787-790, 813. See also 
<CFQUERY> tag; SQL queries. 
relational, 783-786 
selecting, best practices, 33 
table data, 757-759 
types of, 719 
unique identifiers, 754 
DateFormat () function, 772 
date/time format, 772 
debugging, 51, 726, 733-734 
DELETE command, 757 
Delete Draft option, 489 
Delete Layer button, 354 
Delete Objects When Cropping, 188 
Delete Page option, 488-489 
Delete Paths When Converting..., 188 
Delete Record feature, 130 
Delete Settings option, 299 
deleting 
drafts of Web pages, 489 
frames, 106, 284, 415 
FreeHand MX pages, 587, 590-591 
images from cells, 74 
images from pages, 65 
keyboard shortcuts, Flash 8, 363 
layers 
Backspace key, 113 
versus cutting, 113 
Delete button, 405 
Delete key, 113 
Delete Layer button, 354 
drag and drop, 265 
from the Layer list, 403 
from Layers panel, 604 
links, 68 
masks, 273 
movie clips, 450 
PNG source files, 339 
roles, 538-539 
scenes, 426 
table data, 757 

















tables, 72 
text, 60-63, 215 
text boxes, 612 
text from cells, 74 
text from pages, 60-63 
vector images, 224-225 
Web pages, 488-489 
deployment, 36-38, 726. See also exporting; 
publishing. 
Design Notes, 87, 157-159 
Design Notes report, 91 
design views, 46-47, 50-51 
Designer workspace, 44 
designers, 38 
developing Web content. See content 
development. 
digital certificates, 36 
Director, 314, 344 
directories, 129 
Display Record Count feature, 130 
Display tier architecture, 712 
Distort tool, 179, 238-240 
distorting 
definition, 239 
images, 239-240 
objects, 381 
versus skewing, 239 
Skew/Scale/Distort tool, 179 
text, 241-243 
distributing (making available). See 
exporting; publishing. 
distributing (dispersing) objects, 385-386, 
404-405 
dithering colors, 205 
docking panels, 184-186, 357 
document content, 19 
Document window, 46-47, 55-57 
document window, 574 
Documentation Center, 53 
document-related buttons, 50-51 
documents 
Contribute 3, 495, 519-520 
checking in/out. See checking files 
in/out. 
converting to SWF files. See FlashPaper. 
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Fireworks 8 resizing, 585-586 
color management, 203-206 resolution, 590 
creating, 193-195 rulers, 592 
interpolation, 199 saving, 604-606 
magnification, 195-196 thumbnail display, 589-590 
resizing images, 198-201 Dodge tool, 180 
resizing the canvas, 201-203 dodging (lightening) images, 180 
saving, 197-198 downloading 
switching views, 195-196 gradually, 292 
Flash 8, 352, 361-363 PDF files, 21 
FreeHand MX speed, best practices, 37 
bleed, 590 Draft Console, 491 
creating, 584 Draft Console option, 491 
default size, 583-584 Draft History option, 491 
exporting, 605-606 drafts of Web pages. See Web pages, drafts. 
grids, 592 Drafts option, 488 
guides, 593-594 Drag Out event, 454 
opening, 591 Drag Over event, 454 
orientation, 585-586 Draw Layout Cell button, 47-48 
pages, 586-591 Draw Layout Table button, 47-48 
registration marks, 590 drawing graphics, 180-181, 222 
resizing, 585-586 See also Fireworks 8 
resolution, 590 See also FreeHand MX 
rulers, 592 See also graphics 
saving, 604-606 See also graphics tools 
thumbnail display, 589-590 See also images 
documents, FreeHand MX See also specific shapes 
bleed, 590 drawing guide layers, 406-407 
creating, 584 Dreamweaver 
default size, 583-584 integration with 
exporting, 605-606 FreeHand MX, 702-705 
grids, 592 Dreamweaver 8 
guides, 593-594 versus Contribute 3, 482 
opening, 591 creating pages, 45 
orientation, 585-586 integration with 
pages ColdFusion, 167, 807-810 
adding, 586-587 Contribute, 167-169 
deleting, 587, 590-591 Fireworks, 336-340 
duplicating, 587 Flash, 163-167, 472-473 
Master Pages, 587-589 FreeHand, 167 
rearranging, 590-591 recently used pages, opening, 45 
selecting, 590-591 templates, 152-156, 566-567 
publishing as HTML, 703-705 uses for, 14, 24 


registration marks, 590 Web development, 24-25 
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Dreamweaver 8, user interface. See also 
Document window. 
Check Browser Support button, 50 
Check In button, 50 
Check Out File(s) button, 50 
code display, 44 
Code view, 46-47 
Connect to Remote Host button, 50 
Design view, 46-47 
Designer workspace, 44 
document-related buttons, 50-51 
Draw Layout Cell button, 47-48 
Draw Layout Table button, 47-48 
Expand/Collapse button, 50 
Expanded Table mode, 47-48 
File Management button, 50 
Get File(s) button, 50 
Help button, 52 
Help menu, 52-53 
Help tools, 52 
help tutorials, 52-53 
Home Site/Coder-Style workspace, 44 
Insert bar, 47 
Layout mode, 47-48 
modes, 47-48 
panels 
Files, 48-51 
Properties, 52 
role of, 51 
Tag Inspector, 51 
Preview/Debug in Browser button, 51 
Put File(s) button, 50 
Refresh button, 50-51 
Show Code and Design Views button, 50 
Show Code View button, 50 
Show Design View button, 50 
site-related buttons, 50 
Split view, 46-47 
Standard mode, 47-48 
Start page, 44-46 
toolbar buttons, 49-51 
Validate Markup button, 50 
View Options button, 51 
views, 46-47 


Visual Aids button, 51 
workspace, selecting, 44 
Workspace Startup dialog box, 44 
WYSIWYG, 44 
Dreamweaver Library, export option, 314 
Dreamweaver Sites. See also Web sites. 
Accessibility report, 92 
annotations, 87 
checking files in/out, 91, 93 
cloaking, 87 
collaborative design, 87 
Combinable Nested Font Tags report, 
91-92 
Contribute compatibility, enabling, 88 
creating, 45, 76-82 
default images folder, 78 
definition, 48 
Design Notes, 87 
Design Notes report, 91 
elements of, 48-49 
examining, 48-51 
File view, customizing, 87-88 
FTP connections, 84 
hiding filetypes or folders, 87 
key features, 49 
links, checking, 92 
local root folder, 77 
local/network connections, 84-85 
maintaining, 90-92 
Missing All Text report, 92 
naming, 77 
publishing, 89-90 
RDS connections, 85 
Recently Modified report, 91 
Redundant Nested Tags report, 92 
refreshing local file list, 77 
remote connections, setting up, 82-85 
Removable Empty Tags report, 92 
reports, 90-92 
site maps, 87 


source control, 93. See also checking files 


in/out. 
SourceSafe connections, 85 
testing your server, 86 


Untitled Documents report, 92 
uses for, 75-76 
WebDAV connections, 85 
drop shadows, 262 
duplicateMovieClip action, 450 
duplicating 
FreeHand MX pages, 587 
keyboard shortcuts, Flash 8, 363 
movie clips, 450 
scenes, 426 
slices, 296-297 
dynamic 
elements, 29 
HTML, 33 
Web sites, 709-711. See also CFML 
(ColdFusion Markup Language); 
ColdFusion. 
Dynamic Data feature, 129 


E 





Edit menu, 352, 489-490 
Edit mode, 487 
edit options, 189 
Edit Page button, 486 
Edit Page option, 488 
Edit Page Source... option, 489 
edit permissions, 543-545 
Edit preferences, Fireworks 8, 188 
Editable option, 190 
editable options, 190 
editing 
bitmap images, 233-234 
ColdFusion tags, 130 
colors, 182 
fills, 388-389 
Fireworks with FreeHand, 343-344 
frames, 284 
GIFs, 162 
graphic symbols, 394-395 
guides, 594 
images, 66-67, 159-162, 182 
JPEGs, 162 
layers, 404-406, 603-604 
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links in SWF files, 166-167 
mask layers, 407 
Master Pages, 589 
movies, 165-166 
objects, 642-643 
options, 188 
PNGs, 161-162, 337-338 
preferences, setting, 493 
slices, 293-297 
tables with roundtrip HTML, 338-340 
text, 60-63 
vector images, 224-225 
Web pages, 486-490, 502 
Elapsed seconds, 355 
Ellipse tool, 181, 595, 634-635 
e-mail 
administrator’s address, 529-530 
ColdFusion MX 7, 129 
links, 518-519 
sending, 799-801 
server connections, 730-732 
spooling, 730 
embedding sound and video, 148-150 
encoding type, forms, 98 
Envelope toolbar, 577 
Eraser tool, 179, 378 
erasing 
bitmap images, 234 
images, 179 
objects, 378 
text, 378 
error checking, code. See code validation. 
error information, ColdFusion MX 7, 128 
event gateways, 726 
event handling 
animation, 425 
mouse events, 425 
movie clip events, 450 
movie clips, 450 
Excel, 21 
Exit option, 488 
Expand/Collapse button, 50 
Expanded Table mode, 47-48 
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expanding/collapsing 
layers, 264, 266 
panels, Fireworks 8, 183-184 
panels, Flash 8, 357 
Site tab, 50 
view of nested layers, 121-122 
views, nested layers, 121-122 
Export Area tool, 179 
Export option, 488 
export options, 181, 314-319 
Export Wizard option, 299 
exporting. See also deployment; 
publishing. 
Al files, 301 
animated GIFs, 312 
BMP files, 301 
cropped areas, 179 
documents from FreeHand MX, 605-606 
file types, 301, 445 
from Fireworks to Flash, 333-335 
images, 310-312, 446 
movies, 446, 699-701 
PICT files, 301 
PNG files, 301 
PSD files, 301 
Quick Export button, 344 
Source as Layers mode, 344 
Source as Slices mode, 344 
SWF files, 301 
TIFF files, 301 
WBMP files, 301 
Web pages, 488 
expressions 
CFML, 738, 744-745 
definition, 452 
test, 751 
extensions, 53, 726 
Extrude tool, 662 
extruding objects, 662 
Eye Candy 4000, 262 
Eyedropper tool, 181, 384, 686 


F 


feathering edges, 271. See also anti-aliasing; 
blurring. 
feature design, best practices, 33 
File Management button, 50 
File menu, 352, 487—489 
file transfer, 50 
File view, customizing, 87-88 
files 
access permissions, 541-543 
backups, 535-536 
checking in/out, 50, 91, 93. See also 
source control. 
ColdFusion MX 7, 129 
deletion permission, 543 
editors, 493-494 
examining, 48-51 
extensions, best practices, 33 
naming conventions, 35 
placement rules, 551-553 
sharing, best practices, 36 
size, 206, 300, 556-558 
Files panel, 48-51 
Fill Color box, 598-600 
fills 
adding to shapes, 227-228, 598-600 
bitmap, 389 
color, mixing, 679 
creating 
basic, 688-689 
custom, 692 
gradient, 689-691 
Lens, 692 
Pattern, 693 
PostScript, 693 
textured, 693 
tiled, 691-692 
defining, 598-600 
definition, 571 
drawing, 598-600 
editing, 388-389 





filling enclosed shapes, 373-374 
modifying, 600, 688-693 
removing, 228 
solid color, 181 
filters, 254. See also Fireworks 8. 
Find Edges filter, 261-262 
Find option, 490 
Fireworks 
integration with 
FreeHand MX, 695-696 
Fireworks 8 
advanced tools 
button rollovers, 321-324 
export options, 314-319 
hotspots, 320-321 
image maps, 319-321 
interactivity, 324-330 
ask when launching, 189 
auto shape objects, 181 
bicubic interpolation, 187, 199 
bilinear interpolation, 187, 199 


bitmap images, 179-180. See also vector 


images. 
bitmap options, 188 
blurs, 180 
brush-size painting cursors, 188 
colors, 179-182, 187 
convert to Fireworks objects, 190 
convert to frames, 190 
customizing, 183-186 


cutting and pasting between Flash 8, 


471-472 

documents 
color management, 203-206 
creating, 193-195 
interpolation, 199 
magnification, 195-196 
resizing images, 198-201 
resizing the canvas, 201-203 
saving, 197-198 
switching views, 195-196 


drawing, 180-181. See also bitmap 
images; images; vector images. 
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edit options, 188-189 
editable options, 190 
editing with FreeHand, 343-344 
export options, 181 
exporting cropped areas, 179 
exporting to Flash, 333-335 
folder options, 189 
frame navigation, 181 
versus FreeHand MX, 28 
gradients, 181, 182 
help, 178-179, 190-191 
history, viewing, 181 
images, 179-180, 182-183 
import options, 190 
integration with 
ColdFusion, 810 
Director, 344 
Dreamweaver, 336-340 
Flash, 163-167, 333-335, 469-472 
FreeHand, 340-344 
interpolation, 187, 199 
launch options, 188-189 
layers 
benefits of, 174 
options and information, 181 
share between frames, 190 
Web, 175 
links, organizing, 181 
maintain appearance, 190 


nearest neighbor interpolation, 187, 199 


painting, 179 

paths, 188 

pattern options, 189 

Pen tool options, 188 
Photoshop plug-ins, 189 
PNG files, 177, 189 
Pointer tool options, 188 
precise cursors, 188 
previews, 182-183 

as primary image editor, 159-160 
red eye removal, 179-180 
rubber stamps, 179-180 
scaling objects, 179 
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Fireworks 8 (continued) 
selecting areas, 180 
selecting objects, 179 
skewing objects, 179 
slices, 174-176 
soft interpolation, 187, 199 
special characters, 181 
text, placing and editing, 180 
texture options, 189 
third-party filters, 262 
undo steps, setting, 187 
use flat composite image, 190 
user interface, 176-190. See also specific 
interface elements. 
uses for, 14, 25-26, 173 
vector images, 180-181. See also bitmap 
images. 
Web design, 25 
fixed-size text boxes, 608-609, 613-614 
Flash 
integration with 
FreeHand MX, 696-701 
Flash 8. See also movies. 
bitmap graphics, 349-350 
creating animation, 26-27 
creating documents, 352 
creating Web content, 348-349 
cutting and pasting between Fireworks 8, 
471-472 
document properties, setting, 361-363 
help, 365 
importing PNG files, 470-471 
inserting in Web pages, 151-152 
integration with 
ColdFusion, 474, 477, 810-811 
Dreamweaver, 163-167, 472-473 
Fireworks, 333-335, 469-472 
Flash Communication Server MX, 475 
Flash Remoting MX, 476 
FreeHand, 473-474 
keyboard shortcuts 
creating, 363-364 
deleting, 363 
duplicating, 363 
managing, 363 


menus, 353-354 
renaming, 363 
Tool panel, 356-357 
panels 
collapsing/expanding, 357 
docking, 357 
hiding/displaying, 357 
Library, 358-360 
Properties, 358 
saving layouts, 357 
stacking, 357 
preference, setting, 361-363 
user interface 
Action feature, 355 
Command menu, 353 
Control menu, 353 
Current frame, 355 
Delete a layer, 354 
Edit menu, 352 
Elapsed seconds, 355 
File menu, 352 
Help menu, 353 
Insert a layer, 354 
Insert menu, 353 
Keyframe with content, 355 
Keyframe with no content, 355 
Layer list, 354 
menus, 352-353 
Modify menu, 353 
Motion tween feature, 355 
Playhead feature, 354 
Shape tween feature, 355 
Sound feature, 355 
Text menu, 353 
Timeline, 354-355 
Tools panel, 356-357 
View menu, 353 
Window menu, 353 
uses for, 14, 26-27, 347-348 
vector graphics, 349-350 


viewing movies on Web sites, 349 
Flash 8, moviemaking 


default frame rate, 351 
frames, 350-351 
layers, 350-351 


scenes, 350, 352 

stage 
definition, 350 
description, 350-351 
panning, 360-361 
viewing, 360-361 
zooming, 360-361 

Timeline, 351 

Flash buttons, 142-144 


Flash Communication Server MX. See also 


Flash Remoting Service. 
integration with Flash, 475 
Flash Remoting Service. See also Flash 
Communication Server. 
integration with 
ColdFusion, 811-813 
Flash, 476 
Flash SWF 
export option, 315 
Flash text, 139-141 
FlashPaper, 519-520, 563-565 
flipping 
images, 246 
objects, 383-384, 657-659 
text, 247 
Flow icon, 128 
folder access permissions, 541-543 
folder options, 189 
folder organization, 35 
Folders preferences, Fireworks 8, 189 
fonts 
changing, 210 
color, 211-214 
faces, 505 
permissions, 546-548 
reducing number of, 438 
resizing, 210-211 
selecting, 210-211 
styles, 616-617 
text, 58, 61 
text boxes, 616-617 
Format menu, 492 
format selection, 11 


Index 


formatting, Web pages with tables. 


See tables. 

formatting text 
alignment, 619 
along paths, 627-630 
baseline shift, 626 
color, 618-619 
columns and rows, 621-622 
Contribute 3, 492, 504-509 
copying attributes, 623 
Dreamweaver 8, 61 
fonts, 616-617 
kerning, 625-626 
leading, 625 
letter spacing, 625-626 
line spacing, 625 
paragraph settings, 619-620 
scaling horizontally, 622-623 
size, 616-617 
styles, font, 616-617 
styles, text, 617-618 
tools for, 614-615 
visual effects, 623-624 

forms 
adding elements, 101-102 
adding to pages, 96-97 
buttons, 100-101 
checking for values, 791-794 
content type, 19 
creating, 96, 466-468 
CSS (Cascading Style Sheets), 98 
data collection, 466-468 
definition, 95 
encoding type, 98 
GET method, 97-98 
labeling objects, 98 
naming, 97 
None button, 100-101 
password fields, 99 
POST method, 97-98 
posting data from, 468 
processing actions, 97 
processing methods, 97-98 
properties, setting, 97-98 
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forms (continued) 
Reset Form button, 100-101 
Submit button, 100-101 
target, 98 
text fields, 99-100 
45-degree lines, 219 
Forward button, 485 
4-up view, 182, 306, 308-309 
frame navigation, 181 
frame rate, 287-288, 414 
frame-by-frame animation, 417-418 
frames 
actions, 451-453 
adding, 102-103, 283-284, 415 
animated GIFs, 286-289 
appearance, changing, 414 
comments, 414 
copying and pasting, 415 
creating, 102-103 
default frame rate, 351 
definition, 95, 102, 263 
deleting, 106, 284, 415 
description, 282-283 
editing, 284 
Flash 8, 350-351 
go to, 449 
go to specific, 414 
keyframes, 415-417 
labels, 414 
modifying, 103-105 
moving, 415 
no-frames content, 106-107 
renaming, 284 
resizing, 414 
rollovers, 285-286 
saving, 106 
selecting, 415 
targeting content, 107-109 
using, 416-417 
Frames and History panel, 181 
Frames to Files, export option, 315 
framesets, 102, 106 
free form lines, drawing, 180 
Free Transform tool, 379-382 


free-form lines, 371-372 
free-form shapes, 636-639 
free-form straight lines, 223 
Freeform tool, 180 
FreeHand MX 


versus Fireworks 8, 28 
grouping panels, 580 
importing into Fireworks, 343 
integration with 

Dreamweaver, 167, 702-705 

Fireworks, 340-344, 695-696 

Flash, 473-474, 696-701 
layers 

creating, 602-603 

deleting, 604 

displaying objects as keylines, 603 

editing, 603-604 

locking/unlocking, 603 

making nonprintable, 603 

merging, 603-604 

moving objects between, 603 

rearranging, 603 

showing/hiding, 603 

showing/hiding objects, 603 
tools 

3D Rotation, 668-669 

Arc, 668 

Calligraphic Pen, 639 

drawing, 574-576 

Ellipse, 595, 634-635 

Extrude, 662 

Knife, 647-648 

Lasso, 641-642 

Line, 598 

menu commands, 614 

Move command, 659-660 

Page, 590-591 

Pen, 597-598 

Pencil, 637-638 

Perspective, 660-661 

Pointer, 640-641, 662-664 

Polygon, 595, 633-634 

Rectangle, 595, 632-633 

Reflect command, 658-659 


Rotate command, 656-657 
Scale command, 652-653 
Shadow, 669-670 

Skew command, 654-655 
Smudge, 669 

Spiral, 635-636 
Subselection, 641 

Text, 595, 607-609 

text, 614-615 

Text toolbar, 614 

Trace, 664-666 


Variable Stroke Pen, 638-639 


Xtra, 667-670 
Xtra Operations, 670-671 
user interface 
Align panel, 645-646 
document window, 574 
Fill Color box, 598-600 
panels, 577-580 
pasteboard, 574 
toolbars, 576-577 
uses for, 15, 28 
FreeHand MX, documents 
bleed, 590 
creating, 584 
default size, 583-584 
exporting, 605-606 
grids, 592 
guides, 593-594 
opening, 591 
orientation, 585-586 
pages 
adding, 586-587 
deleting, 587, 590-591 
duplicating, 587 
Master Pages, 587-589 
rearranging, 590-591 
selecting, 590-591 
registration marks, 590 
resizing, 585-586 
resolution, 590 
rulers, 592 
saving, 604-606 
thumbnail display, 589-590 
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FreeHand MX, text boxes 
auto-expanding, 608, 613-614 
characteristics, changing, 613-614 
deleting, 612 
fixed-size, 608-609, 613-614 
formatting text 

alignment, 619 
along paths, 627-630 
baseline shift, 626 
color, 618-619 
columns and rows, 621-622 
copying attributes, 623 
fonts, 616-617 
kerning, 625-626 
leading, 625 
letter spacing, 625-626 
line spacing, 625 
paragraph settings, 619-620 
scaling horizontally, 622-623 
size, 616-617 
styles, font, 616-617 
styles, text, 617-618 
tools for, 614-615 
visual effects, 623-624 
moving, 612 
resizing, 612-613 
rulers, 609-610 
spell check, 610-612 

fscommand action, 450 

FTP 
connections, 84 
proxy preferences, setting, 494 
requests, 129 

functional content organization, 20 

functions, CFML 
arrayNew(), 770-771 
calling, 770 
categories of, 769 

DateFormat (), 772 

definition, 738 

isDefined(), 771 

len(), 771-772 

ListAppend(), 775 

Trim(), 773 
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G 





Gaussian Blur filter, 260 
Get, file transfer, 50 
Get File(s) button, 50 





getURL action, 450 
GIF Adaptive 256 settings, 304 
GIF Web 216 settings, 303 
GIF Web Snap 128 settings, 303 
GIF Web Snap 256 settings, 303 
GIFs 
animated. See animated GIFs. 
compression, 297 
editing, 162 
optimizing, 299-300 
slices 
Animated GIF Web Snap 128 
settings, 303 
compression, 297 
creating, 303-305 
custom settings, 304-305 
default settings, 303-304 
GIF Adaptive 256 settings, 304 
GIF Web 216 settings, 303 
GIF Web Snap 128 settings, 303 
GIF Web Snap 256 settings, 303 
optimizing, 299-300 
transparency, 305 
transparency, 442-443 
Go button, 486 


go to frames and scenes, 414, 424—425, 449 


Go to Web Address option, 491 
Google, 567-568 
goto action, 424, 449 
gotoAndPlay action, 449 
gotoAndStop action, 449 
graceful degradation, 205 
gradient fills, 689-691 
Gradient tool, 181 
gradients 

bitmap images, 252 

colors, 249 

Colors panel, 182 


GET method, 97-98. See also CF .http. 


creating, 387-388 
definition, 248 
Paint Bucket/Gradient tool, 181 
patterns, 248, 253 
removing opacity, 252 
textures, 253-254 
user-defined, 250-252 
vector images, 249-252 
graphic symbols 
creating, 393-394 
definition, 391 
editing, 394-395 
inserting on Stage, 394 
instance of, 392-393 


graphics. See also illustrations; images. 


content, 19 
design, best practices, 33 
drawing 
See drawing graphics 
See Fireworks 8 
See FreeHand MX 
See graphics tools 
See specific shapes 
rotating, 243-245 
scaling 
description, 235 
by numerical value, 237-238 
with Property Inspector, 237-238 
with Scale tool, 236-237 
text, 207-208 
text alternative, 208 
graphics tools 
Brush, 372-373 
Eraser, 378 
Eyedropper, 384 
Free Transform, 379-382 
Ink Bottle, 374 
Lasso, 377 
Line, 368-369 
Oval, 369 
Paint Bucket, 373-374 
Pen, 372 
Pencil, 371-372 
Polystar, 370-371 


Rectangle, 369-370 
Selection 
reshaping objects, 378-379 
selecting objects, 376-377 
smoothing, 382 
straightening, 382 
Subselect, 379 
Text, 374-376 
Tools panel, 368 
graphs, 801-804 
grids, 55-57, 592 
grouping 
objects, 384-385, 643-644 
panels, Fireworks 8, 184-186 
guide layers 
definition, 401, 406 
drawing, 406-407 
motion, 403, 406 
guides, 593-594 


H 





hackers, protecting against, 35-36 
Halftones panel, 579 
header rows, in tables, 514 
headers, creating, 128 
headings, Web pages, 59 
help 

CD-ROM, 191 

ColdFusion, 52 

Contribute 3, 484-485, 492 

Documentation Center, 53 

extensions, 53 

Flash 8, 365 

getting started, 52 

Help menu, 190 

PDFs, 191 

reference, 52 

tooltips, 178-179, 191 

tutorials, 52-53, 190-191 
Help button, 52 
Help menu 

ActionScript, 353 

Contribute 3, 492 
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Dreamweaver 8, 52-53 
Fireworks 8, 190 
Flash 8, 353 
Help tools, 52 
help tutorials, 52-53 
hexadecimal colors, 204 
hiding 
filetypes or folders, 87 
layers, 264, 267 
masks, 273 
panels, Fireworks 8, 184 
panels, Flash 8, 357 
hiding/showing 
layers, 402, 410, 603 
objects on layers, 603 
hierarchical content organization, 20 
histograms, 258 
history, viewing, 181 
HLS (Hue, Lightness, Saturation), mixing, 
676-677 
home pages, 486, 490 
Home Pages button, 486 
Home Pages option, 490 
Home Site/Coder-Style workspace, 44 
hotspots 
creating, 137-139 
definition, 137 
image maps, 320-321 
modifying, 139 
polygonal, 277 
slices, 309-310 
How Do I panel, 484-485 
HTML (Hypertext Markup Language). See 
also CFML (ColdFusion Markup 
Language). 
code validation, 50, 156 
exporting with images, 314, 316-318 
file options, setting, 318-319 
text, 207-208 
HTML Setup dialog box 
Document Specific tab, 319 
General tab, 318-319 
Table tab, 319 
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HTTP requests, 129 smudging, 669 
hue adjustments, 255, 257-258 spirals, 635-636 
Hue/Saturation control, 255 squares, 595, 632-633 
hyperlinks. See links. straight lines, 598 
strokes, 600-601 
1 text, 595 


tracing bitmap images, 664-666 
identity keys, 754 vector shapes, 595-597 
illustrations. See also graphics; images. Ilustr ator 7, export option, 315 
arcs, 668 Image Editing panel, 182 
bitmap shapes, 649-650 image maps, 137-139, 319-321 
calligraphy, 639 images. See also graphics; illustrations. 
circles, 595 adding to pages, 64-65 


coloring shapes, 598-600 aligning, 66 
custom shapes, 597-598 alternative text, 66 





ellipses, 595, 634-635 background. See background, images. 
fills, 598-600 bitmap. See bitmap images. 
free-form shapes, 636-639 blurring, 180, 259-261 
line size, 638-639 borner pns 
lines, 637-638 burning (darkening), 180 
objects changing files, 67 
aligning, 645-646 compression. See compression. 


arranging, 644-645 cropping, 179, 188 
changing shape, 667-670 default folder, 78 


vg deleting, 65 
diting, 642-643 
dine 662 distorting, 179, 239-240 


flipping, 657-659 dodging (lightening), 180 


‘ P drop shadows, 262 
, 643-644 , 
mirroring, 657-659 editing, 66-67, 159-162, 182 


moving, 659-660 editing permissions, 556-558 
perspective, 660-661, 668-669 erasing, 179 ; 
reflecting, 657-659 erporting 310-3) 
rotating, 655-657, 662-664 flipping, 246 
rotating, 3D, 668-669 layer background, 114 
scaling 650653 662-664 links from, 66. See also hotspots; image 
selecting, 640-642 maps: 
skewing, 653-655, 662-664 mapping, Gr 
slicing, 647-648 modifying, 65-67 
stacking order, 644-645 MOVERS: 65 
outlines, 600-601 naming on ae: 
ovals, 595 optimizing. See optimizing. 
lygons, 595, 633-634 padding, 66 
ae d shapes, 631-636 photographs as line drawings, 261-262 
rectangles, 595 632-633 photo-realistic. See bitmap images. 


shadows, 669-670 quality, JPEG, 300 


in relation to text, 67 
resizing, 65-66 
rollovers, 144-145 
shadow auto shapes, 262 
shadows, 262 
sharpening, 180, 259-261 
skewing, 240-241 
smudging, 180 
swapping, 324-326 
in tables, 516-517 
of text, 207-208 
tracing, 60 
transparency, 60 
vector. See vector images. 
Images Only, export option, 314 
Import option, 190 
importing 
ColdFusion tags, 129 
from Fireworks to Flash, 335 
FreeHand into Fireworks, 343 
PNG files to Flash 8, 470-471 
tag libraries, ColdFusion MX 7, 129 
inheritance in layers, 117 
Ink Bottle tool, 374 
Insert a layer, 354 
Insert bar 
Advanced icon, 128-129 
Application category, 129-130 
CFFORM category, 130 
CFML category, 127-128 
command categories, 126-130 
definition, 124 
Dreamweaver 8, 47 
features, 126-130 
Flow icon, 128 
INSERT command, 758 
Insert menu, 353, 491 
Insert Record feature, 130 
inserting 
bitmap images, 230-231 
button symbols, 399 
graphic symbols, 394 
table data, 758 
text, 214 
instances, graphic symbols, 392-393 
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interactivity. See also actions; ActionScript. 
button rollovers, 324-326 
button symbols, 400 
image swaps, 324-326 
pop-up menus, 326-330 
interface selection, 11 
Interlaced option, 299-300 
interpolation, 187, 199 
Invert control, 255 
invisible elements, 495 
isDefined() function, 771 
italic text, 62, 506 


Java Applets, inserting, 151-152 
JavaScript, executing from Web pages, 450 
jerky movement, 414 
JPEGs 

compression, 297 

editing, 162 

optimizing, 298-299 

slices, 297-303 

transparency, 443 


K 


kerning, 208, 625-626 
Key Press event, 454 
keyboard shortcuts 

FreeHand MX tools, 576 

panels, Fireworks 8, 184 
Keyframe with content, 355 
Keyframe with no content, 355 
keyframes, 415-417, 434 
keyword content organization, 20 
Knife tool, 180, 647-648 


L 











labels, 414, 458, 463 
Lasso tool, 179, 232, 377, 641-642 
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Launch and Edit, 189 
Launch options, 188-189 
launching your site. See deployment; 
publishing. 
Layer list, 354, 402-403 
layers. See also Web layers. 
active, 402 
adding, 111-112, 265 
aligning, 115-116 
background images/colors, 114 
benefits of, 174 
changing properties, 113-114 
changing stacking order, 268-269 
collapsing/expanding, 264, 266 
copying, 405 
creating, 403 
default, 402 
definition, 263 
deleting, 113, 265, 403, 405 
distributing objects to, 404-405 
editing, 404—406 
Flash 8, 350-351 
FreeHand MX, 602-604 
guide 
definition, 401, 406 
drawing, 406-407 
motion, 403, 406 
height, changing, 410 
hiding, 264, 267 
inheritance, 117 
inserting, 402 


locking/unlocking, 264, 267, 402, 409-410 


making active, 265-266 
making visible, 267 
managing with folders, 403, 410-411 
masks 
anti-aliasing, 271 
bitmap, 271-273 
blurring, 271 
creating, 407 
definition, 270-271, 401 
deleting, 273 
editing, 407 
feathering edges, 271 


hiding, 273 

illustration, 408 

linking to, 407 

vector, 271, 274-275 
merging, 270 
moving, 119-120 
moving objects between, 404 
naming, 114-115, 265, 267-268 
nested 

child layers, 120 

collapsing/expanding the view, 121-122 

creating, 121-122 

definition, 120 

enabling, 121 

parent layers, 120 

visibility, 117, 120 
objects 

blending, 279-282 

moving between layers, 278 

opacity, 278-279 

renaming, 278 

transparency, 278-279 

visibility, 409 
options and information, 181 
outlines 

color, 410 

displaying, 402 

turning on/off, 410 
placing objects, 113 
positioning objects, 70 
properties, setting, 409-410 
renaming, 405, 410 
reordering, 268-269, 406. See also 

stacking order. 
resizing, 120 
selecting, 112-113, 404 
share between frames, 190 
showing, 264, 267 
showing/hiding, 402, 410 
shuffling. See reordering; stacking order. 
stacking order, 117-119. See also 
reordering. 

type, changing, 410 
using, 403 


visibility of layers, 116-117 
visibility of objects, 409 
z-index, 117-119 
Layers panel, 181, 578 
Layers to Files, export option, 314 
layout, Web pages 
See forms 
See frames 
See layers 
See tables 
See templates 
Layout mode, 47-48 
layout tables, 72-74 
LDAP access, 129 
leading, 208, 625 
len() function, 771-772 
Lens fills, 692 
letter spacing, 208, 625-626 
level adjustment, 255, 258-259 
Levels control, 255 
Library panel, Flash 8, 358-360 
lightening (dodging) images, 180 
lightness adjustments, 255, 257-258 
line breaks, 63 
line spacing, 208, 625 
Line tool, 180, 368-369, 598 
lines 
45-degree, 219 
curved, 223 
drawing, 180, 218-219, 637-638 
free form, 371-372 
free-form straight, 223 
size, varying, 638-639 
straight, 368-369, 372, 598 
straightening, 382 
stroke color, changing, 374 
links 
adding, 68 
to audio clips, 150 
changing color on rollover, 139-141 
checking, 92 
color, 59 
creating, 450 
deleting, 68 
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description, 148 
editing, 166-167 
to e-mail addresses, 518-519 
fonts, 59 
from images, 66. See also hotspots; 
image maps. 
mask layers, 407 
named anchors, 68-70 
opening behavior, 62 
organizing, 181 
pop-up menus, 326-327 
in tables, 517-519 
text, 62 
to video clips, 150 
to Web pages, 517-518 
list boxes, 458, 462 
ListAppend() function, 775 
lists, structured data, 773-775. See also 
arrays; structures. 
lists, Web page, 508-509 
live effects, 254 
Load Palette option, 299 
loaders, 458, 464 
loading/unloading movie clips, 450 
loadMovie action, 450 
local root folder, 77 
local/network connections, 84-85 
locking layers 
from contextual menu, 409 
with Layer list, 402 
in Layer Properties dialog box, 410 
Lock/Unlock button, 264 
padlock icon, 603 
uses for, 267 
logging activities, 726, 732-733 
logging on to ColdFusion Administrator, 
724-725 
logical content organization, 20 
looping, animated GIFs, 288-289 
looping through table data, 759 
lossless compression, 297 
lossy compression, 297 
Lotus Domino Designer, 315 
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M 





Macromedia Flash 8 ActionScript Bible, 811 
Macromedia products. See specific 
products. 
Magic Wand tool, 180, 233 
magnification, 195-196 
mail. See e-mail. 
Main toolbar, 576 
Maintain Appearance, 190 
maintaining 
Dreamweaver Sites, 90-92 
Web sites, 29-30. See also administering 
Web sites; Contribute 3. 
mapping 
alternative Web site addresses, 532-533 
images, 67 
to index files, 533-535 
margins, setting, 58 
marquee 
converting from paths, 188 
selecting, 179, 231 
Marquee tool, 179, 231 
mask layers 
creating, 407 
definition, 401 
editing, 407 
illustration, 408 
linking to, 407 
masks 
anti-aliasing, 271 
bitmap, 271-273 
blurring, 271 
definition, 270-271 
deleting, 273 
feathering edges, 271 
hiding, 273 
vector, 271, 274-275 
Master Detail Page Set feature, 130 
Master Pages, 587-589 
menus, 352-353, 487-492 
merging layers, 270, 603-604 
metadata, SQL queries, 753 
Microsoft documents, setting 
preferences, 495 


Microsoft products. See specific products. 
mirroring objects, 657-659 
Missing All Text report, 92 
Mixer and Tints panel, 578 
Mixer tab. See also Swatches tab; System 
Color Picker. 
adding colors to Swatches tab, 679-680 
applying color to objects, 678 
CMYK colors, 674-675 
fill color, 679 
HLS color, 676-677 
overview, 674 
RGB color, 675-676 
stroke color, 679 
Modify menu, 353 
modifying objects. See transformations; 
specific modifications. 
modules, specifying, 129 
More Tags button, 129 
morphing. See shape tweening. 
motion guide layers, 403, 406 
Motion tween feature, 355 
motion tweening, 355, 417-422 
Move command, 659-660 
movie clips 
actions in, 448-451 
deleting, 450 
drag and drop, 450 
duplicating, 450 
event handling, 450 
loading/unloading, 450 
properties, setting, 450 
symbols 
converting from animation, 397 
creating, 396 
definition, 391 
uses for, 395 
unloading/loading, 450 
updating after event, 450 
movies 
See also animation 
See also Flash 8 
See also Timeline 
See also video 
actions, 448-451 


ActionScript, 698-699 
animation, 696-698 
default frame rate, 351 


distributing. See publishing, movies. 


editing, 165-166 
frames, 350-351 
inserting in documents, 163-164 
layers, 350-351 
preference, setting, 361-363 
scenes, 350, 352 
stage 
definition, 350 
description, 350-351 
panning, 360-361 
viewing, 360-361 
zooming, 360-361 
in tables, 517 
Timeline, 351 
viewing on Web sites, 349 
moving 
frames, 415 
images, 65 
layers, 119-120 
objects, 377, 659-660 
panels, Fireworks 8, 184-186 
slices, 294-295 
text, 216, 376-377 
text boxes, 216, 612 
vector images, 224-225 
music. See audio. 
muting sounds, 449. See also volume 
control. 
My Connections option, 490 


N 





named anchors, 68-70 
naming 
Dreamweaver Sites, 77 
forms, 97 
images, 66 
layers, 114-115, 265, 267-268 
slices, 293-294 
navigation bars, 146-148 
navigation links, 702-703 
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Navigation panel, 579 
Nearest Neighbor Interpolation, 187 
nearest neighbor interpolation, 187, 199 
nested layers 
child layers, 120 
collapsing/expanding the view, 121-122 
creating, 121-122 
definition, 120 
enabling, 121 
parent layers, 120 
nested tables, 73 
Never Use Source PNG, 189 
New Page button, 486 
New Page option, 487 
news sites, 13 
nextFrame action, 449 
nextScene action, 449 
no-frames content, 106-107 
None button, 100-101 
nonpersistent variables, 794-795 
nonprintable layers, 603 
numbered lists, 508-509 
numeric stepper, 458, 465 


0 





Object Linking and Embedding (OLE), 
786-787 

Object tab, 642-643 

objects 
aligning, 385-386, 645-646 
arranging, 644-645 
breaking apart, 385 
changing shape, 667-670 
copying, 377 
cutting. See slices. 
displaying as keylines, 603 
distorting, 381 
distributing, 385-386 
editing, 642-643 
erasing, 378 
extruding, 662 
flipping, 383-384, 657-659 
grouping, 384-385 
grouping/ungrouping, 643-644 
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objects (continued) 
on layers 
blending, 279-282 
moving between layers, 278 
opacity, 278-279 
renaming, 278 
transparency, 278-279 
mirroring, 657-659 
modifying. See transformations; specific 
modifications. 
moving, 377, 659-660 
moving between layers, 404, 603 
perspective, 660-661, 668-669 
reflecting, 657-659 
reshaping, 378-379 
rotating, 380, 655-657, 662-664 
rotating, 3D, 668-669 
scaling, 380, 650-653, 662-664 
selecting 
Lasso tool, 377 
Pointer tool, 640-642 
Selection tool, 376-377 
Subselect tool, 379 
skewing, 380, 653-655, 662-664 
slicing, 275-276, 647-648 
stacking order, 644-645 
tapering, 380 
touching objects, 368 
transferring properties, 384 
transforming, 379-382 
visibility, 409 
warping, 381 
ODBC (Open Database Connectivity), 
786-787 
OLE (Object Linking and Embedding), 
786-787 
on action, 425, 450 
onClipEvent action, 450 
onion skinning, 286-287 
opacity, 252, 278-279 
Optimize panel 
Delete Settings option, 299 
description, 298 
Export Wizard option, 299 


GIFs, 299-300 
Interlaced option, 299-300 
JPEGs, 298-300 
Load Palette option, 299 
Optimize to Size option, 299 
Progressive JPEG option, 299 
Remove Unused Colors option, 299-300 
Save Palette option, 299 
Save Settings option, 298 
Sharpen JPEG Edges option, 299 
Show Swatch Feedback option, 299 
uses for, 181 
Optimize to Size option, 299 
optimizing 
curves, 382-383 
GIFs, 299-300 
image slices 
compression types, 297 
GIF compression, 297 
GIFs, 299-300 
individual optimization, 291 
JPEG compression, 297 
JPEGs, 298-300 
Optimize panel, 298-300 
JPEGs, 298-299 
for the Web, 297 
organizing content, 19-20 
Original view, Fireworks 8, 182 
outlines 
color, 410, 600-601 
displaying, 402 
drawing, 374 
turning on/off, 410 
Oval Marquee tool, 179, 231 
Oval tool, 369 
ovals, 221, 369, 595 
overlapping slices, 294 


P 





packaging options, 726 
padding images, 66 
page encoding, 128 
Page Setup option, 488 


Page tool, 590-591 
pages. See Web pages. 
Pages panel, 483-484 
Paint Bucket tool, 181, 373-374 
Paint Bucket/Gradient tool, 181 
painting, 179 
palettes, 304 
panels 
Contribute 3, 482-487 
Files, 48-51 
Fireworks 8 
collapsing/expanding, 183-184 
docking, 184-186 
grouping, 184-186 
hiding, 184 
keyboard shortcuts, 184 
moving, 184-186 
opening/closing, 183-184 
ungrouping, 186 
FreeHand MX, 577-580 
Properties, 52 
role of, 51 
Tag Inspector, 51 
panning, 360-361 
paragraph settings, 619-620 
Paragraph Spacing option, 544-545 
parent layers, 120 
password fields, 99 
passwords, administrators, 530-531 
Paste option, 490 
Paste Text Only option, 490 
pasteboard, 574 
pasting and cutting objects, 490 
Path Scrubber tool, 180 
paths 
converting to marquee, 188 
cutting, 180 
delete when converting..., 188 
drawing, 180 
modifying, 180 
pulling, 180 
redrawing, 222 
running text along, 627-630 
Pattern fills, 693 
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pattern options, 189 
patterns, gradients, 248, 253 


Patterns preferences, Fireworks 8, 189 


PayPal, 567-568 
PDA accessibility, 33 
PDF files, 21, 563 
Pen tool 
complex shapes, 222 
curves, 372 
FreeHand MX, 597-598 
placing points, 222 
straight lines, 372 
vector drawings, 180 
Pen Tool Options, 188 
Pencil tool, 180, 371-372, 637-638 
permissions 
deleting, 537 
edit, 543-545 
file access, 541-543 
file deletion, 543 
folder access, 541-543 
styles, 546-548 
persistent variables, 794-795 
personal sites, 14 
perspective, 660-661, 668-669 
Perspective tool, 660-661 


photographs as line drawings, 261-262 
photo-realistic images. See bitmap images. 


Photoshop Plug-ins, 189 
Photoshop PSD, 315 
PICT files, exporting, 301 
pictures 

See bitmap images 

See graphics 

See illustrations 

See images 

See vector images 
play action, 425, 449 
Playhead feature, 354 
playing 

animation, 425 

movie clips, 449 

self-playing movies, 445-446 
plug-ins, 19 
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PNG files 
adding tables to, 339-340 
always use source, 189 
creating, 177, 339 
deleting source files, 339 
editing, 161-162, 337-338 
exporting, 301 
importing to Flash 8, 470-471 
never use source, 189 
transparency, 443-444 
PNG to HTML export option, 315-316 
point handles, 223 
Pointer tool, 179, 640-641, 662-664 
Pointer Tool Options, 188 
Polygon Lasso tool, 179, 232 
Polygon Slice tool, 277-278 
Polygon tool, 181, 595, 633-634 
Polygonal Hotspot tool, 277 
polygonal slices, 277-278 
polygons 
drawing, 181, 221, 633-634 
equilateral, 221 
polystars, 370-371 
predefined, 595 
selecting, 181 
Polystar tool, 370-371 
POP servers, 129 
pop-up menus, 326-330 
portal sites, 13 


POST method, 97-98. See also CF .http. 


posting data from forms, 468 
PostScript fills, 693 
pound sign (#) 
CFML tags, 739-740 
surrounding text with, 128 
Precise Cursors, 188 
predefined shapes, 631-636 
Preferences option, 490 
Press event, 454 
prevFrame action, 449 
Preview in Browser option, 487 
Preview pane, 307 
Preview view, 182, 306 
Preview/Debug in Browser button, 51 


previewing your work 
animated GIFs, 289 
in a browser, 51, 74 
Fireworks 8, 182-183 
in a browser, 520-521 
slices, 306-309 
Web pages, 487 
prevScene action, 449 
print jobs, previewing, 488 
Print option, 488 
Print Preview option, 488 
printers, page setup, 488 
printing Web pages, 488 
producers, 38 
product sites, 13 
programmers, 38 
progress bars, 458 
Progressive JPEG option, 299 
Properties panel, 52, 358, 577-578 
Property Inspector, 164-165, 182, 237-238 
PSD files, exporting, 301 
Publish as New Page option, 489 
Publish option, 489 
Publish settings dialog box, 435-437 
publishing 
FreeHand documents as HTML, 703-705 
Web pages, 489, 520-521, 551-553 
publishing, movies. See also deployment; 
exporting. 
creating 
GIF files, 442-443 
graphic files, 442-444 
HTML code, 441-442 
JPEG files, 443 
PNG files, 443-444 
projectors, 445-446 
QuickTime movies, 444—445 
self-playing movies, 445-446 
Dreamweaver Sites, 89-90 
file types, 436 
HTML files, 436 
minimizing sound file size, 439 
optimizing speed, 437-440 
optimizing text, 438-439 


options, setting, 435-437 
simplifying graphics, 438 
sound compression, 439 
SWF files, 436 
testing download time, 439-440 
transparency, 442-443, 445 
push buttons, 458, 461 
Put, file transfer, 50 
Put File(s) button, 50 


0 





quality assurance, 39. See also 
best practices. 

queries, 787-790, 813. See also <CFQUERY> 
tag; SQL queries. 

Quick Export button, 344 


R 








radio buttons, 458, 460-461 
RDS connections, 85 
Recently Modified report, 91 
Recently Published Pages option, 488 
Recordset feature, 129 
Recordset Paging feature, 130 
Rectangle tool 
FreeHand MX, 595 
rectangles, 369-370, 632-633 
squares, 369-370, 632-633 
vector shapes, 181 
rectangles 
drawing, 181, 219-220, 369-370, 632-633 
editing, 225 
modifying, 224 
moving, 225 
predefined, 595 
rectangular slices, 277-278 
Red Eye Removal tool, 179-180 
Redo option, 490 
redoing actions, Contribute 3, 490 
Redraw Path tool, 180, 222 
Redundant Nested Tags report, 92 
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Reference tab, 124 
Reflect command, 658-659 
reflecting objects, 657-659 
Refresh button, 50-51, 485 
Refresh Drafts option, 491 
refreshing local file list, 77 
registration marks, 590 
relational databases, 783-786 
relative paths, 35 
Release event, 454 
Release Outside event, 454 
remote connections, setting up, 82-85 
Removable Empty Tags report, 92 
Remove Unused Colors option, 299-300 
removeClipEvent action, 450 
renaming 

colors, 683-684 

frames, 284 

keyboard shortcuts, Flash 8, 363 

layers, 405, 410 

objects, 278 

scenes, 426 
reordering 

layers, 268-269, 406. See also stacking 

order. 

scenes, 426 
Repeated Region feature, 129 
Replace Color tool, 179-180 
replacement colors, 179-180 
reports, Dreamweaver Sites, 90-92 
requirements, best practices, 32-33 
requirements definition, 32 
Reset Form button, 100-101 
Reshape Area tool, 180 
reshaping objects, 378-379 
resizing 

canvas, 198-203 

documents, 198-201 

fonts, 210-211 

frames, 414 

FreeHand MX documents, 585-586 

images, 65-66, 198-201 

layers, 120 

slices, 295-296 
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text, 61, 505 
text boxes, 216-217, 612-613 
Web pages, 56 
resolution 
FreeHand MX documents, 590 
screen, 32, 56 
review history, drafts of Web pages, 491 
reviewing drafts of Web pages, 489 
RGB (Red Green Blue) 
mixing, 675-676 
RGB color mode, 340 
roles 
deleting, 538-539 
edit permissions, 543-545 
file access permissions, 541-543 
file deletion permission, 543 
file size limits, 556-558 
folder access permissions, 541-543 
fonts permissions, 546-548 
image editing permissions, 556-558 
page creation permissions, 548-551 
setting up, 538 
settings, editing, 539-540 
settings, general, 540-541 
style permissions, 546-548 
Roll Back... option, 489 
Roll Out event, 454 
Roll Over event, 454 
Rollback feature, 535-536 
rolling back Web pages, 489 
rollovers 
button, 321-324 
buttons, 142-144, 285-286 
frames, 285-286 
images, 144-145 
text, 139-141 
Rotate command, 656-657 
rotating 
graphics, 243-245 
objects, 380, 655-657, 662-664 
objects in 3D, 668-669 
text, 245-246 
Rounded Rectangle tool, 181 
rounded rectangles, 181 


roundtrip HTML 
definition, 336 
editing tables, 338-340 
rows, table, 515-516 
Rubber Stamp tool, 179-180 
rulers 
Document window, 55-57 
documents, 592 
FreeHand MX documents, 592 
text boxes, 609-610 


S 





saturation adjustments, 255, 257-258 
Save for Later option, 487 
Save option, 487 
Save Palette option, 299 
Save Settings option, 298 
saving 
documents, 197-198 
frames, 106 
framesets, 106 
FreeHand MX documents, 604—606 
Web pages, 487-488 
Scale command, 652-653 
Scale tool, 179, 236-237 
scaling 
bitmap images 
description, 235 
by numerical value, 237-238 
with Property Inspector, 237-238 
with Scale tool, 236-237 
graphics 
description, 235 
by numerical value, 237-238 
with Property Inspector, 237-238 
with Scale tool, 236-237 
objects 
Free Transform tool, 380 
manually, 651-652 
Pointer tool, 662-664 
Scale command, 652-653 
Scale/Skew/Distort tool, 179 
text horizontally, 622-623 


vector images 
description, 235 
by numerical value, 237-238 
with Property Inspector, 237-238 
with Scale tool, 236-237 
scenes 
adding, 426 
definition, 350 
deleting, 426 
duplicating, 426 
go to, 449 
renaming, 426 
reordering, 426 
Timeline organization, 352 
viewing, 426 
screen resolution, 32, 56 
scroll panes, 458, 462-463 
scrolling the Timeline, 415 
security 
best practices, 35-36 
code protection, 35-36 
ColdFusion Administrator, 726 
digital certificates, 36 
hackers, protecting against, 35-36 
preferences, setting, 495—496 
Select All option, 490 
Select Behind tool, 179 
SELECT command, 756-757 
Select tools, 177, 179 
selecting 
areas, 180 
bitmap images 
contiguous colors, 233 
irregular areas, 232 
oval areas, 231 
polygonal areas, 232-233 
rectangular areas, 231 
colors, 181 
frames, 415 
FreeHand MX pages, 590-591 
layers, 112-113, 404 
objects 
in drafts of Web pages, 490 
Lasso tool, 377 
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Pointer tool, 640-642 
Selection tool, 376-377 
Subselect tool, 379 
polygons, 179 
text, 376-377, 506 
Selection tool 
reshaping objects, 378-379 
selecting objects, 376-377 
smoothing, 382 
straightening, 382 
Send for Review option, 489 
servers 
behaviors, ColdFusion, 135-136 
POP, ColdFusion, 129 
testing, 86 
variables, ColdFusion, 127 
server-side ActionScript, 474 
services options, 725 
session variables, 795-796 
sessions, 794-796 
setProperty action, 450 
shadows 
adding to images, 262 
auto shapes, 262 
Shadow tool, 669-670 
Shape tween feature, 355 
shape tweening, 355, 422—424 
shapes 
See bitmap images 
See graphics 
See illustrations 
See images 
See vector images 
Share Layers Between Frames, 190 
shared assets, 553-556 
Sharpen JPEG Edges option, 299 
Sharpen tool, 180 
sharpening images, 180, 259-261 
Shockwave, inserting, 151-152 


Show Code and Design Views button, 50 


Show Code View button, 50 

Show Design View button, 50 

Show Region feature, 129 

Show Swatch Feedback option, 299 
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showing/hiding 
layers, 402, 410, 603 
objects on layers, 603 
shuffling layers, 268-269 
sidebar, showing/hiding, 490 
Sidebar option, 490 
site maps, 87 
site-related buttons, 50 
sites. See Web sites. 
size. See resizing. 
Skew command, 654-655 
Skew tool, 179, 238-241 
skewing 
definition, 239 
versus distorting, 239 
images, 240-241 
objects 
Free Transform tool, 380 
manually, 653-654 
Pointer tool, 662-664 
Scale/Skew/Distort tool, 179 
Skew command, 654-655 
text, 241-243 
slash (/), CFML tags, 738 
slashes (//), comment indicator, 451 
Slice tool, 276-277 
slices. See also layers. 
2-up view, 306-308 
4-up view, 306, 308-309 
advantages of, 291-292 
aligning, 295 
canvases, 277-278 
creating, 174-176, 293-297 
definition, 275 
duplicating, 296-297 
editing, 293-297 
GIFs 
Animated GIF Web Snap 128 
settings, 303 
compression, 297 
creating, 303-305 
custom settings, 304-305 
default settings, 303-304 
GIF Adaptive 256 settings, 304 


GIF Web 216 settings, 303 
GIF Web Snap 128 settings, 303 
GIF Web Snap 256 settings, 303 
optimizing, 299-300 
transparency, 305 
gradual download, 292 
hotspots, 309-310 
image compression, 297 
JPEGs 
compression, 297 
creating, 300-302 
custom settings, 301-303 
default settings, 300-301 
file size, 300 
optimizing, 298-299 
picture quality, 300 
moving, 294-295 
naming, 293-294 
objects, 275-276, 647-648 
optimizing images 
compression types, 297 
GIF compression, 297 
GIFs, 299-300 
individual optimization, 291 
JPEG compression, 297 
JPEGs, 298-300 
Optimize panel, 298-300 
overlapping, 294 
polygonal, 277-278 
Preview pane, 307 
Preview view, 306 
previewing, 306-309 
rectangular, 277-278 
resizing, 295-296 
smoothing curves, 382 
Smudge tool, 180, 669 
smudging, 180, 669. See also blurring. 
snapping to grids, 55-57 
Snippets tab, 124 
Soft Interpolation, 187 
soft interpolation, 187, 199 
soft launch, 38 
softening edges, 383 
software tools. See tools. 


sound. See also audio; Flash 8. 
ADPCM compression, 432 
AIFF format, 427 
bit rate, 428 
button symbols, 399 
channels, 428 
compression, 432 
editing, 430-431 
file formats, 427 
importing, 428-429 
in movies, 429-430 
MP3 compression, 432 
MP3 format, 427 


muting, 449. See also volume control. 


properties, setting, 432-433 
Raw compression, 432 
reducing file size, 427 
sample rate, 428 

trimming ends, 431 


volume control, 431. See also muting. 


WAV format, 427 
Sound feature, 355 
Sound Properties dialog box, 432 
Source as Layers mode, 344 
Source as Slices mode, 344 
source control, 93 
SourceSafe connections, 85 
special characters, 181, 209 
Special Characters panel, 181 
special effects, graphic. See 
transformations; specific effects. 
spell check, 610-612 
Spiral tool, 635-636 
spirals, 635-636 
Split view, 46-47, 51 
splitting vector images, 225-226 
spreadsheets, 21 
SQL For Dummies, 755 
SQL queries. See also CF . query. 
columns, 754 
creating, 756-758 
DELETE command, 757 
examples, 755 
identity keys, 754 
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INSERT command, 758 
metadata, 753 
outputting to the screen, 758-759. See 
also <CFOUTPUT> tag. 
retrieving data, 756-757 
sample database, 754 
SELECT command, 756-757 
SQL commands, 756-758 
SQL elements, 754 
table data 
deleting, 757 
inserting, 758 
looping through, 759 
updating, 758 
unique identifiers, 754 
UPDATE command, 758 
wildcards, 755 
squares 
drawing, 219-220, 369-370, 632-633 
predefined, 595 
stacking order 
layers, 117-119. See also reordering. 
objects, 644-645 
stacking panels, 357 
stage 
definition, 350 
description, 350-351 
panning, 360-361 
viewing, 360-361 
zooming, 360-361 
Standard mode, 47—48 
Start Page, 176-177 
Start page, 44-46 
startDrag action, 450 
states, button symbols, 398 
stop 
animation, 425 
movies, 449 
sounds, 449 
stop action, 425, 449 
Stop button, 485 
stop playing animations, 425 
stopAllSounds action, 449 
stopDrag action, 450 
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Stored Procedure feature, 129 
straight lines, drawing 
Line tool, 180, 368-369, 598 
Pen tool, 372 
straightening lines, 382 
strings 
length, returning, 771-772 
trimming blanks, 773 
strokes 
categories of, 229 
color, 374, 600-601 
color, mixing, 679 
definition, 571 
line size, varying, 638-639 
modifying, 686-688 
structured data sets 


arrays. See also lists; structures. 


creating, 776-780 
definition, 773 
two-dimensional, 779-780 
using, 777-779 


lists. See also arrays; structures. 


creating, 774-775 
definition, 773 


structures. See also arrays; lists. 


definition, 773 
functions for, 782 
using, 780-782 
structures. See also arrays; lists. 
definition, 773 
functions for, 782 
using, 780-782 
Studio 8 
tools included with, 14-15 
uses for, 23-24 
style sheets, best practices, 33 
styles 
fonts, 616-617 
permissions, 546-548 
text, 61, 505, 617-618 
Submit button, 100-101 
Subselect tool, 379 
Subselection tool, 179, 641 


Surround with # button, 128 
Swap Image behavior, 324-326 
swapping images, 324-326 
Swatches tab 
adding colors to. See also Mixer tab; 
System Color Picker. 
custom colors, 679-680, 685 
preset colors, 683 
exporting color palettes, 684-685 
overview, 681-682 
renaming colors, 683-684 
SWF files 
from Contribute 3 documents. 
See FlashPaper. 
editing links in, 166-167 
exporting, 301, 315 
publishing movies as, 436 
symbols. See also components. 
button 
animation, 399 
creating, 398-399 
definition, 391 
inserting on Stage, 399 
interactivity, 400 
sounds, 399 
states, 398 
testing, 400 
graphic 
creating, 393-394 
definition, 391 
editing, 394-395 
inserting on Stage, 394 
instance of, 392-393 
movie clip 
converting from animation, 397 
creating, 396 
definition, 391 
uses for, 395 
qualities of, 392 
system administration. See administering 
Web sites. 
System Color Picker, 677-678. See also 
Mixer tab; Swatches tab. 





Table menu, 492 
tables 
adding, 70-72 
adding data to, 511-512 
cells 
images, adding/deleting, 74 
selecting, 47-48 
storing information in, 74 
text, adding/deleting, 74 
cells, selecting, 515-516 
columns, selecting, 515-516 
deleting, 72 
documents in, 519-520 
Flash movies, 517 
header rows, 514 
images, 516-517 
inserting in Web pages, 510-511 
layout, 72-74 
links, 517-519 
modifying, 512-516 
nesting, 73 
positioning objects, 70 
row height, 515 
rows, selecting, 515-516 
selecting, 47-48 
Web layers, 275 
wrapping text, 514 
Tag Inspector panel, 51 
tags, CFML. See also specific tags. 
# (pound sign), 739-740 
choosing, 129 
creating, 127-129, 740-742 
customizing, 804-806 
definition, 738 
editing, 130 
importing, 129 
summary of, 739 
syntax, 738 
tangent lines, 379 
tapering objects, 380 
targets 
forms, 98 
frame content, 107-109 
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teams, 38-39. See also collaboration; 
Contribute 3. 
technical design, best practices, 33 
templates, 152-156, 566-567, 747-750 
test expressions, 751 
testing 
best practices, 36-38 
button symbols, 400 
servers, 86 
text. See also Fireworks 8. 
adding, 60-63, 504 
aligning, 62, 506 
aligning along a path, 217 
alternative for images, 66 
alternative to graphics, 208 
background color, 507-508 
bold, 62, 506 
breaking apart, 385 
bulleted lists, 509 
character spacing, 208 
color, 58, 61, 506-507 
content, 19 
copying, 376-377 
creating, 209-210, 374-376 
deleting, 60-63, 215 
distorting, 241-243 
editing, 60-63, 160-161 
erasing, 378 
fields, in forms, 99-100 
finding, 490 
Flash, 139-141 
flipping, 247 
fonts 
changing, 210 
color, 211-214 
faces, 505 
properties, 58 
resizing, 210-211 
selecting, 61, 210-211 
formatting. See formatting text. 
graphic, 207-208 
HTML, 207-208 
in illustrations, 595 
input areas, 458, 464-465 
inserting, 214 
italic, 62 
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text (continued) 
italics, 506 
kerning, 208 
leading, 208 
line breaks, 63 
line spacing, 208 
links, 62 
moving, 216, 376-377 
numbered lists, 508-509 
pictures of, 207-208 
placing and editing, 180 
properties, 375-376 
in relation to images, 67 
replacing, 215-216 
rollovers, 139-141 
rotating, 245-246 
selecting, 376-377, 506 
size, 61, 505 
skewing, 241-243 
special characters, 181, 209 
style, 61 
styles, 505, 617-618 
tools for, 614-615 
transforming, 379-382 
types of, 207-208 
wrapping, 514 

text areas, 458, 464 

text boxes 
auto-expanding, 608, 613-614 


characteristics, changing, 613-614 


deleting, 612 
fixed-size, 608-609, 613-614 
formatting text 
alignment, 619 
along paths, 627-630 
baseline shift, 626 
color, 618-619 
columns and rows, 621-622 
copying attributes, 623 
fonts, 616-617 
kerning, 625-626 
leading, 625 
letter spacing, 625-626 
line spacing, 625 
paragraph settings, 619-620 


scaling horizontally, 622-623 
size, 616-617 
styles, font, 616-617 
styles, text, 617-618 
tools for, 614-615 
visual effects, 623-624 
moving, 216, 612 
resizing, 216-217, 612-613 
rulers, 609-610 
spell check, 610-612 
Text menu, 353 
Text tool 
auto-expanding text boxes, 608 
creating text, 209-210, 374-376 
fixed-size text boxes, 608-609 
text in illustrations, 595 
vector shapes, 180 
Text toolbar, 576, 614 
texture options, 189 
textured fills, 693 
textures, gradients, 253-254 
Textures preferences, 189 
3D Rotation tool, 668-669 
three-tier architecture, 712 
thumbnail display, 589-590 
TIFF files, exporting, 301 
tiled fills, 691-692 
tiling background images, 58 
time/date format, 772 
Timeline 
animation length, changing, 415 
control actions, 449 
displaying, 354 
features, 354-355 
frame rate, 414 
frames 
adding, 415 
appearance, changing, 414 
comments, 414 
copying and pasting, 415 
deleting, 415 
description, 351 
go to specific, 414 
keyframes, 415, 416-417 
labels, 414 


moving, 415 
resizing, 414 
selecting, 415 
using, 416-417 
illustration, 413 
jerky movement, 414 
scrolling, 415 
tints, 680-681 
titles, setting, 60 
Tools panel, 177-181, 356-357, 368 
tooltips, 178-179, 191 
topical content organization, 20 
Trace tool, 664-666 
tracing images, 60, 664-666 
tracking changes. See Design Notes. 
transferring properties, 384 
Transform panel, 579 
transformations 
distorting 
definition, 239 
images, 239-240 
objects, 381 
versus skewing, 239 
text, 241-243 
flipping 
images, 246 
text, 247 
Free Transform tool, 379-382 
mirroring. See flipping. 
objects, 379-382 


rotating 
graphics, 243-245 
objects, 380 


text, 245-246 

scaling bitmap images 
description, 235 
by numerical value, 237-238 
with Property Inspector, 237-238 
with Scale tool, 236-237 

scaling graphics 
description, 235 
by numerical value, 237-238 
with Property Inspector, 237-238 
with Scale tool, 236-237 
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scaling objects, 380 
scaling vector images 
description, 235 
by numerical value, 237-238 
with Property Inspector, 237-238 
with Scale tool, 236-237 
skewing 
definition, 239 
versus distorting, 239 
images, 240-241 
objects, 380 
text, 241-243 
tapering, 380 
text, 379-382 
warping, 381 
transparency 
alpha transparencies, 335 
Convert to Alpha filter, 261-262 
GIFs, 305 
images, 60 
objects, 278-279 
Trim() function, 773 
tutorials, 52-53, 190-191 
tweening. See motion tweening; 
shape tweening. 
2-up view, 182, 306-308 


u 


underline style, selecting, 59 
Undo option, 490 

Undo Send option, 489 

Undo Steps, 187 

undoing actions, Contribute 3, 490 
ungrouping panels, 186 
unloadMovie action, 450 
Unsharp Mask filter, 260-261 
Untitled Documents report, 92 
UPDATE command, 758 

Update Record feature, 130 
updateAfterEvent action, 450 
uploading Web pages. See publishing. 
Use Flat Composite Image, 190 
User Authentication feature, 130 
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user interface, Studio 8 products. See 


specific products. 


user interface, Web pages. See also forms. 


components 
check boxes, 458, 460 
combo boxes, 458, 461-462 
creating, 458-460 
definition, 457 
labels, 458, 463 
list boxes, 458, 462 
loaders, 458, 464 
numeric stepper, 458, 465 
progress bars, 458 
properties, setting, 465 
push buttons, 458, 461 
radio buttons, 458, 460-461 
scroll panes, 458, 462—463 
text areas, 458, 464 
text input areas, 458, 464-465 
windows, 458, 465 

design, best practices, 33 

users, setting up, 537-539 


V 





Validate Markup button, 50 
variability and Web design, 205 
Variable Stroke Pen tool, 638-639 
variables, CFML 

binary, 744 

complex, 744 

creating, 761-764 

data types, 744 

definition, 738, 761 

generated by ColdFusion, 768 

naming, 742-743 

nonpersistent, 794-795 

objects, 744 

persistent, 794-795 

querying, 768 

scope, 742-744 

session, 795-796 





setting, 128. See also <CFSET> tag. 


simple, 744 


testing for, 764-767 
validating, 771 
vector images 
See also bitmap images 
See also FreeHand MX 
See also graphics 
See also illustrations 
See also images 
45-degree lines, 219 
Auto Shapes menu, 222-224 
brushlike effects, 372-373 
circles, 369, 595 
color, 226-228 
complex shapes, 222-224 
connecting points, 222 
converting to marquees, 231 
corner points, 223 
curve points, 223 
curves, 223, 372, 382-383 
custom shapes, 597-598 
deleting, 224-225 
drawing, 181, 222 
editing, 224-225 
ellipses, 181, 595 
filling enclosed shapes, 373-374 
fills, 598-600 
Flash 8, 349-350 
free form lines, 180 
free-form straight lines, 223 
gradients, 249-252 
lines 
free form, 371-372 
Line tool, 218-219 
Pen tool, 180 
straight, 368-369, 372 
straightening, 382 
stroke color, changing, 374 
modifying, 180 
moving, 224-225 
objects 
aligning, 385-386 
breaking apart, 385 
copying, 377 
distorting, 381 


distributing, 385-386 
erasing, 378 
flipping, 383-384 
grouping, 384-385 
moving, 377 
reshaping, 378-379 
rotating, 380 
scaling, 380 
skewing, 380 
tapering, 380 
touching objects, 368 
transferring properties, 384 
transforming, 379-382 
warping, 381 
objects, selecting 
Lasso tool, 377 
Selection tool, 376-377 
Subselect tool, 379 
outlines, 600-601 
outlining shapes, 374 
ovals, 221, 369, 595 
paths 
cutting, 180 
drawing, 180 
modifying, 180 
pulling, 180 
redrawing, 222 
point handles, 223 
polygons, 181, 221, 370-371, 595 
rectangles, 181, 219-220, 224, 
369-370, 595 
rounded rectangles, 181 
scaling 
description, 235 
by numerical value, 237-238 
with Property Inspector, 237-238 
with Scale tool, 236-237 
smoothing curves, 382 
softening edges, 383 
splitting, 225-226 
squares, 219-220, 369-370, 595 
straight lines, 180, 598 
strokes, 600-601 
text, 595 
transferring properties, 384 
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uses for, 572-573 
vector paths, 180 
vector masks, 271, 274-275 
Vector Path tool, 180, 222 
Vector tools, 177, 180-181 
video. See also animation; movies. 
codecs, 428 
compression, 428 
file formats, 428 
rules for using, 148 
video clips 
embedding, 149 
linking to, 150 
in movies, 433-434 
video content, 19 
View menu, 353, 490-491 
View Options button, 51 
View tools, 178 
views 
code, 44, 46-47, 50 
code and design, 50 
design, 46—47, 50-51 
Dreamweaver 8, 46-47 
Fireworks 8, 182-183 
split, 46-47, 51 
WYSIWYG, 44 
visibility 
layers, 116-117 
nested layers, 117, 120 
objects, 409 
Visual Aids button, 51 
visual effects, text, 623-624 


volume control, 431. See also muting. 


W 





warping objects, 381 
WBMP files, exporting, 301 
Web application server 
configuring, 717-718 
installing, 714-717 
role of, 710, 712 
server-wide settings, 724-725 


Web connections, best practices, 37 
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Web design 
best practices 
designers, 38 
feature design, 33 
graphics design, 33 
interface design, 33 
site design, 33 
technical design, 33 
graceful degradation, 205 
variability and, 205 
Web host, connecting to, 50 
Web layers 
cutting objects, 276-277 
definition, 263 
illustration, 175 
slices 
canvases, 277-278 
definition, 275 
objects, 275-276 
polygonal, 277-278 
rectangular, 277-278 
tables, 275 
Web pages 
See also documents 
See also Dreamweaver Sites 
See also Web sites 
architecture, 747-750 
background color, selecting, 58 
browsing, 485-486, 491 
clearing, 490 
creating, 45, 57, 486-487, 503-504 
data gathering. See forms. 
deleting, 488-489 
drafts 
deleting, 489 
inserting items, 491 
opening, 488 
review history, 491 
reviewing, 489, 520, 522-523 
selecting objects, 490 
dynamic, 709-711. See also CFML; 
ColdFusion. 
editing, 486-490, 502 
executing JavaScript from, 450 
exporting, 488 


FreeHand MX documents 
adding, 586-587 
deleting, 587, 590-591 
duplicating, 587 
Master Pages, 587-589 
rearranging, 590-591 
selecting, 590-591 
graphical content. See images. 
headings, defining, 59 
hyperlinks, 450 
layout. See forms; frames; tables. 
link color, setting, 59 
link fonts, selecting, 59 
links to, 517-518 
margins, setting, 58 
new page defaults, 536-537 
opening, 58 
page titles, setting, 60 
permissions, 548-551 
previewing, 487 
printing, 488 
properties, setting, 58-60 
publishing, 489 
recently published, viewing, 488 
reviewing, 489 
rolling back, 489 
saving, 487-488 
screen resolution, 56 
sizing, 56 
tabular content. See tables. 
textual content. See text. 
underline style, selecting, 59 
Web. See Web pages. 
Web phone accessibility, 33 
Web server settings, 532-535 
Web sites. See also Dreamweaver sites; 
Web pages. 
administrator access, 490 
application sites, 13 
audience analysis, 11 
commerce sites, 13 
connection maintenance, 490 
content considerations, 11 
debugging, 733-734 


developing content. See content 
development. 


development process. See best practices. 


development tools. See tools. 
dynamic, 709-711. See also 
CFML; ColdFusion. 

format selection, 11 

go to home page, 486, 490 

interface selection, 11 

navigating, 486, 491 

news sites, 13 

personal sites, 14 

portal sites, 13 

prerequisites, 15-16 

product sites, 13 

reasons for creating, 9-10 

reasons for visiting, 12 

site connections 

connection key, 498—499 
Connection Wizard, 499-501 

type, choosing, 13-14 

workload management, 11 
Web tools, 178 
WebDAV connections, 85 
Web-safe colors, 32, 204-206, 386 
wildcards, SQL queries, 755 


Index 


window components, 458, 465 
Window menu, 353 

Word, 21 

word processors, 21 

Work Offline option, 488 
working offline, 521 

workload management, 11 
workspace, selecting, 44 
Workspace Startup dialog box, 44 
wrapping text, 514 

WYSIWYG view, 44 


x 
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XML, code validation, 156 

XSL Transformation feature, 130 
Xtra Operations, 670-671 

Xtra Operations toolbar, 576 
Xtra tools, 667-670 

Xtras toolbar, 577 


Z 





z-index, layers, 117-119 
Zoom tool, 360-361 
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